Un webfont consente di inserire facilmente simboli scalabili in una pagine web. Dopo aver incluso l'opportuno foglio di stile, il simbolo viene inserito tramite un opportuno tag <i>. Nell'attributo class si indica il nome del simbolo ed eventuali formattazioni speciali:
<head> <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"> </head> <h1><i class="fa fa-area-chart fa-fw"></i> Grafici</h1>
Si sono considerati come riferimenti i font FontAwesome e il Webdings di Microsoft. In particolare il primo è distribuito effettivamente come webfont, nei vari formati supportati dai browser (eot, svg, ttf, woff e woff2) e con l'opportuno foglio di stile CSS.
Si deve anzitutto decidere come i simboli occupano lo spazio a loro dedicato, si parla della metrica del font. In generale ogni font dovrebbe definire alcune grandezze di metrica orizzontale, facendo riferimento alla figura si dovrebbero individuare dall'alto vero il basso i valori di:
I caratteri occupano la posizione Private Use Areas, cioè hanno codice a partire da U+F000. La metrica adottata è:
La larghezza di ogni carattere (glyph) è variabile. Per i caratteri con proporzioni “quadrate” la larghezza si attesta sul valore di 1536, quindi la dimensione effettiva è 1536 x 1792.
In generale i caratteri sono centrati orizzontalmente nella loro larghezza. In genere sono anche centrati verticalmente fra ascent e descent, quindi scendono quasi sempre sotto la baseline.
Anche in questo caso la larghezza di ogni glyph è variabile.
In Inkscape esisterebbe la funzione dal menu Text ⇒ SVG Font Editor con la quale è possibile aggiungere un set di caratteri all'interno di un file SVG. La funzione è abbastanza primitiva (Inkscape v.0.48) e sconsigliata. In pratica si deve disegnare una path unica e senza raggruppamenti, dopo averla selezionata si clicca su Get curves from selection…. I glyph inseriti rimarranno all'interno del SVG indipendentemente dal disegno presente sulla pagina. Tuttavia pare che non si possa recuperare i glyph come disegni editabili, inoltre è comunque necessario lavorare con FontForge per modificare la larghezza dei caratteri.
Conviene disegnare i glyph con Inkscape perché ha tutti gli strumenti opportuni di disegno. In genere si dovrà salvare il disegno originale in cui esistono tutte le primitive utilizzate per realizzare il singolo carattere; solo come passo finale si potrà trasformare gli oggetti in path, effettuare le opportune operazioni di unione, intersezione, ecc. e quindi salvare il disegno SVG che verrà importato in FontForge.
Dopo aver importato il singolo carattere come SVG è necessario impostare la larghezza e allineare correttamente il glyph nello spazio. Questi alcuni comandi utili:
Sembra che non ci sia un sistema rapido per riodrinare i glyph negli slot, ad esempio per inserirne uno nuovo e spostare tutti i successivi. In genere si dovrà aggiungere gli slot necessari dopo quelli esistenti, fare il copia e incolla dei glyph da uno slot ad un altro (anche a gruppi), ma nome e codepoint devono essere reimpostati manualmente.
Al termine del lavoro se esistono degli slot non utilizzati è possibile compattare il font con: Encoding ⇒ Remove Unused Slots.
FontForge salva il file nel proprio formato sfd, per creare gli altri formati:
Per convertire nel formato EOT (IE 9 Compatibility Mode)
Un modo alternativo per ottenere il formato WOF è generare il font OpenType con FontForge (estensione OTF) e poi usare il tool sfnt2woff fornito dal pacchetto woff-tools.