Como incorporar o Google Web Fonts a um SVG?

48

Estou escrevendo um artigo no meu site sobre as vantagens das novas tecnologias da web, entre outras HTML5, CSS3 e SVGs, uma das vantagens do último é a capacidade de selecionar texto no que de outra forma é efetivamente uma imagem.

Sou iniciante em SVGs e acabei de criar meu primeiro gráfico decente no Illustrator. Eu a integrei em uma página com o script GWF para a fonte Ubuntu na tag. Como se vê, a fonte Ubuntu é exibida corretamente em texto normal, mas, para que esse truque funcione no SVG, o script do Google precisa ser incorporado no próprio SVG. Como posso fazer isso?

Jules
fonte
11
Uma observação importante sobre as soluções baseadas em @import: elas não funcionam para imagens de segundo plano. Você deve incorporar a fonte via base64 ou usar uma tag de imagem / objeto.
23417 Mickey

Respostas:

39

Você incorpora fontes em CSS usando a codificação base64. Você pode aplicar estilos em documentos SVG semelhantes ao CSS usando um <style />elemento Portanto, se você tiver uma fonte WOFF, incorpore-a assim:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

Onde ...estão os dados da fonte codificada em base64.

Você pode encontrar exemplos disso consultando as folhas de estilo do Typekit. Não tenho certeza se o tipo MIME font/woffestá correto, como também vi pessoas dizendo que deveria application/font-woff. Embora font/woff, font/truetype, font/opentype, etc. parecem ser mais popular.

Como alternativa, você pode realmente pegar a versão SVG da fonte da Web e incorporar a marcação de descrição da fonte SVG dentro do seu documento (embora o suporte ao navegador ainda seja muito limitado, como Luke observa nos comentários).

No entanto, você também deve conseguir vincular a uma fonte externa de acordo com a especificação SVG . Essa seria a melhor solução se você tiver vários documentos SVG referenciando essa fonte.

Lèse majesté
fonte
2
O tipo MIME correto para .woff é agora application/font-woff. stackoverflow.com/a/5142316/90674
sshow
3
Em relação a "você realmente pode pegar a versão SVG da fonte da Web e incorporar a marcação de descrição da fonte SVG no seu documento", lembre-se de que "Atualmente, as fontes SVG são suportadas apenas no Safari e no Android Browser". Veja developer.mozilla.org/pt-BR/docs/Web/SVG/Tutorial/SVG_fonts (também caniuse.com/#feat=svg-fonts )
Lucas
11
Esse segmento ajudou muito, mas a questão passou a ser como converter uma fonte em base64. Este site transfonter.org ajudou muito e permite escolher apenas um subconjunto da fonte a ser convertida, de modo a reduzir o tamanho do arquivo.
Fabien Snauwaert
Essa resposta parecia tentadora, mas no final achei essas etapas mais fáceis, então as compartilhei: graphicdesign.stackexchange.com/a/124900/45239
Ryan
Quando estou abrindo esse svg no adobe illustrator, as fontes não estão carregando. Qualquer ajuda?
Aamir Nakhwa
13

Uma <defs>seção como

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

trabalho.

leighman
fonte
13
Nos navegadores da web atuais (fevereiro de 2016), isso funciona apenas ao carregar o arquivo SVG autônomo. Veja marians.github.io/test-webfonts-in-svg/test.svg para um exemplo. Abrindo o mesmo SVG em uma página HTML, a fonte não é carregada / renderizada. Use marians.github.io/test-webfonts-in-svg como um exemplo.
Marian
11
As páginas SVG e HTML independentes parecem funcionar da mesma forma na Versão 73.0.3683.103 do Chrome (Compilação Oficial) (64 bits).
Paul Grime
Está carregando fontes quando abro svg no navegador, mas quando abro o mesmo arquivo svg no Adobe Illustrator, não está carregando fontes. Qualquer ajuda?
Aamir Nakhwa
3

Você pode incorporar o Google Web Fonts no seu SVG diretamente usando o Nano . Ele verifica automaticamente o seu SVG e incorpora seletivamente apenas as fontes necessárias, garantindo que as fontes do Ubuntu tenham a mesma aparência em todos os navegadores modernos. No meu caso, eu precisava que o Roboto fosse incorporado no meu SVG:

insira a descrição da imagem aqui

Isenção de responsabilidade: Eu estou com a equipe por trás do Nano, e nós também enfrentamos o mesmo problema anteriormente e, portanto, decidimos arriscar nossa própria coceira construindo o Nano. Espero que isso seja útil!

Edit: Aqui está uma rápida explicação sobre o que acontece nos bastidores:

Para incorporar fontes no SVG, primeiro você precisa saber quais famílias de fontes são usadas. Então você precisa encontrar esses arquivos de fonte e baixá-los. Depois de baixado, você deve converter regular, negrito, itálico e itálico em negrito na codificação base 64. Se você estiver fazendo isso manualmente, é uma enorme quantidade de trabalho, em um grande número de arquivos, saber qual arquivo usa negrito e qual não. Então você deve copiar todas as 4 seqüências codificadas de base 64 no seu SVG.

É por isso que criamos o Nano e garantimos que ele digitalize o SVG automaticamente e insira apenas as fontes que estão sendo usadas. Por exemplo, se negrito não for usado ou se não houver texto, nenhuma fonte será incorporada. Tudo o que você precisa fazer é arrastar e soltar seu SVG no Nano e ele funciona como um encanto! Você pode saber mais aqui: https://vecta.io/blog/making-svg-easier-to-use

Qin
fonte
OK, parece ótimo. Infelizmente, enviar para um site do Wordpress que tenha sido muito feliz em aceitar o SVG até agora não "Desculpe, este tipo de arquivo não é permitido por razões de segurança". - o que preciso colocar de volta para fazer isso funcionar?
Chris Pink
1

Isso pode ser muito simplificador, mas você já pensou em baixar a fonte como um arquivo zip do google e permitir que o Illustrator a converta conforme necessário na saída do arquivo SVG?

Isso é apenas teórico, pois ainda não tentei isso, mas, em teoria, parece funcionar.

gabearnold
fonte
0

Adicione a seguinte <desc>tag depois

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>
muTheTechie
fonte
por que incluir tantas fontes do google? Nem todos eles são os mais usados ​​que eu vejo muito, e isso aumentará o peso geral do SVG.
MrMesees
Está carregando fontes quando abro svg no navegador, mas quando abro o mesmo arquivo svg no Adobe Illustrator, não está carregando fontes. Qualquer ajuda?
Aamir Nakhwa
0

ATUALIZAÇÃO para a minha resposta. Agora, prefiro uma resposta diferente nesta página, que é usar o Nano: https://graphicdesign.stackexchange.com/a/121950/45239

Supondo que você baixou e instalou uma fonte da Web em seu sistema e criou um SVG (talvez usando as mesmas etapas descritas abaixo, mas não escolhendo "Fonte: Converter em contornos"), você pode carregar o SVG no Nano e veja a opção "Incorporar fonte: Sim" e clique em Download.

Minha resposta anterior:

Se você deseja sacrificar o texto e o SEO selecionáveis:

  1. Faça o download da fonte da web.
  2. Instale-o localmente.
  3. Abra o Adobe Illustrator
  4. Digite seu texto.
  5. Arquivo> Exportar> Exportar como…
  6. Escolha ".SVG"
  7. Escolha estas configurações:

    • Estilo: Estilo embutido
    • Fonte: Converter em contornos
    • Imagens: Preservar
    • IDs de objeto: nomes de camadas
    • Decimal: 2
    • (ativado) Minify
    • (ativado) Responsivo
  8. Opcionalmente, faça o upload do svg resultante para https://vecta.io/nano (foi possível reduzir o tamanho do meu arquivo em 8,2%)

Ryan
fonte
Infelizmente, 'converter em contornos' não é uma ótima opção para tamanhos de texto menores.
Chris Pink
@ Chrishrink, sim, você está certo !, Por favor, compartilhe se você encontrou alguma outra opção para tamanho de fonte pequeno
Super Model
11
@SuperModel Eu usei o Nano com grande sucesso, com as fontes escolhendo estilos no documento em anexo. Minhas primeiras tentativas falharam, mas com a ajuda da equipe do Nano, resolvemos garantir que o cabeçalho do SVG permanecesse intacto.
Chris Pink