Como incorporar o Google Web Fonts a um SVG?

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?

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.

Uma <defs>seção como

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

trabalho.

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:

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

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.

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>

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%)