Come posso incorporare Google Web Fonts in un SVG?

Sto scrivendo un articolo sul mio sito sui vantaggi delle nuove tecnologie web, tra cui HTML5, CSS3 e SVG, uno dei vantaggi di quest'ultimo è la possibilità di selezionare il testo in ciò che altrimenti sarebbe effettivamente un'immagine.

Sono nuovo di SVG e ho appena realizzato la mia prima grafica decente in Illustrator. L'ho incorporato in una pagina con lo script GWF per il carattere Ubuntu nel tag. A quanto pare, il carattere Ubuntu viene visualizzato correttamente nel testo normale, ma affinché questo trucco funzioni nell'SVG, lo script di Google deve essere incorporato nell'SVG stesso. Come posso fare questo?

Incorporate i caratteri nei CSS usando la codifica base64. È possibile applicare stili nei documenti SVG simili ai CSS utilizzando un <style />elemento. Quindi se hai un carattere WOFF, lo incorporeresti in questo modo:

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

Dove ...sono i dati dei caratteri codificati base64.

Puoi trovare esempi di ciò guardando i fogli di stile di Typekit. Non sono sicuro che il tipo mime font/woffsia corretto, poiché ho anche visto le persone affermare che dovrebbe essere application/font-woff. Anche se font/woff, font/truetype, font/opentype, ecc sembrano essere più popolare.

In alternativa, potresti effettivamente prendere la versione SVG del font web e incorporare il markup di descrizione del font SVG all'interno del tuo documento (anche se il supporto del browser è ancora molto limitato come nota Luke nei commenti).

Tuttavia, dovresti anche essere in grado di collegarti a un carattere esterno secondo la specifica SVG . Sembrerebbe essere la soluzione migliore se hai più documenti SVG che fanno riferimento a quel carattere.

Una <defs>sezione come

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

lavori.

Puoi incorporare Google Web Fonts nel tuo SVG direttamente utilizzando Nano . Esegue automaticamente la scansione del tuo SVG e incorpora selettivamente solo i caratteri richiesti, assicurando che i tuoi caratteri Ubuntu abbiano lo stesso aspetto su tutti i browser moderni. Nel mio caso, avevo bisogno che Roboto fosse incorporato nel mio SVG:

Disclaimer: sono con il team dietro Nano e anche noi abbiamo affrontato lo stesso problema in precedenza, quindi abbiamo deciso di grattarci il prurito costruendo Nano. Spero sia utile!

Modifica: ecco una breve spiegazione di ciò che accade dietro la scena:

Per incorporare i caratteri in SVG, devi prima sapere quali famiglie di caratteri vengono utilizzate. Quindi è necessario trovare questi file dei caratteri e scaricarli. Una volta scaricato, devi convertire il corsivo normale, grassetto, corsivo e grassetto in codifica base 64. Se lo stai facendo manualmente, è una grande quantità di lavoro, su un gran numero di file, sapere quale file utilizza grassetto e quali no. Quindi devi copiare tutte e 4 le stringhe codificate in base 64 nel tuo SVG.

Ecco perché costruiamo Nano e ci assicuriamo che scansiona automaticamente SVG e inserisca solo i caratteri utilizzati. Ad esempio, se non viene utilizzato il grassetto o se non esiste alcun testo, non verranno incorporati caratteri. Tutto quello che devi fare è trascinare e rilasciare il tuo SVG in Nano e funziona come un incantesimo! Puoi saperne di più qui: https://vecta.io/blog/making-svg-easier-to-use

Ciò può essere eccessivamente semplificato, ma hai preso in considerazione il download del font come file zip da Google e poi lasciare che Illustrator lo converta in base alle tue necessità nel tuo file in formato SVG?

Questo è solo teorico in quanto non l'ho ancora provato, ma in teoria sembrerebbe funzionare.

Aggiungi il seguente <desc>tag dopo

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

AGGIORNAMENTO alla mia risposta. Ora preferisco una risposta diversa su questa pagina, che è usare Nano: https://graphicdesign.stackexchange.com/a/121950/45239

Supponendo che tu abbia scaricato e installato un font web sul tuo sistema e abbia creato un SVG (magari usando molti degli stessi passaggi descritti di seguito ma non scegliendo "Font: Converti in contorni"), puoi caricare SVG su Nano e vedi l'opzione "Incorpora carattere: Sì" e fai clic su Scarica.

La mia risposta precedente:

Se sei disposto a sacrificare testo e SEO selezionabili:

1. Scarica il font web.
2. Installalo localmente.
3. Apri Adobe Illustrator
4. Digita il testo.
5. File> Esporta> Esporta come ...
6. Scegli ".SVG"

7. Scegli queste impostazioni:

   • Styling: stile in linea
   • Carattere: Converti in contorni
   • Immagini: preservare
   • ID oggetto: nomi layer
   • Decimale: 2
   • (abilitato) Minimizza
   • (abilitato) Reattivo

8. Opzionalmente carica lo svg risultante su https://vecta.io/nano (È stato in grado di ridurre le dimensioni del mio file dell'8,2%)