I web fonts sono una tecnica CSS, prevista già dalla specifica CSS2, che consente al browser di scaricare dal web il font utilizzato per il testo di un elemento html.

Con i font per il web la scelta del font non è più limitata a quelli installati nei sistemi operativi client in cui si visualizza il documento e non è più necessario ricorrere sempre al testo grafico realizzato con Photoshop.

Cos’è un web font: la regola @font-face

La regola @font-face definisce una nuova famiglia di caratteri e indica al browser il percorso del file che contiene il font. Dopo la definizione del font la nuova famiglia di caratteri può essere applicata attraverso la proprietà font-family.

@font-face {
    font-family: 'ambleregular';
    src: url('Amble-Regular-webfont.ttf');
}

p{font-family: 'ambleregular';}

Nella regola @font-face, il descrittore font-family definisce il nome della nuova famiglia di caratteri e può essere una stringa qualsiasi.

Il descrittore src definisce l’url del file in cui è codificato il carattere. Può essere un percorso relativo (rispetto al foglio di stile) o assoluto.

Nella regola @font-face si può indicare anche se il carattere è corsivo o grassetto.

@font-face {
    font-family: 'amble';
    src: url('Amble-Bolder-webfont.eot');
    font-weight: bolder;
    font-style: normal;
}

In questo caso se l’autore applica il grassetto a un testo che usa il font Amble il browser dovrebbe caricare direttamente il font con il descrittore font-weight con il valore bolder.

La regola @font-face  e  il supporto dei browser

La regola @font-face è largamente supportata dai browser e da diverse versioni, come si può constatare dalla seguente tabella.

IEChromeFirefoxSafariOperaiOS SafariAndroid
Supporto @font-face5.5423.193.22.1

In ogni caso, se il browser non supporta @font-face la ignora e quindi la famiglia di caratteri definita al suo interno non potrà essere utilizzata.

Per questo motivo è opportuno indicare nella proprietà font-family anche delle famiglie di caratteri web-safe (font presenti nei più diffusi sistemi operativi) separandole con la virgola.

p{ font-family: 'ambleregular', Verdana, Geneva, sans-serif; }

Se il browser non supporta @font-face  proverà a caricare la seconda famiglia indicata (Verdana) e poi, se nemmeno questa è riconosciuta, proverà a usare la terza (Geneva) e così via finché non trova una famiglia di caratteri disponibile nel sistema in uso. Infine, se nessuna delle famiglie di caratteri indicata è disponibile il browser utilizza il carattere predefinito.

I browser però supportano diversi formati di font:

  • EOT (Embedded Open Type) è supportato solo da Microsoft Internet Explorer dalla versione 4 alla 8.
  • SVG (Scalable Vector Graphics) è supportato da Google Chrome, Safari e Opera. Inoltre è l’unico formato supportato da Safari per iOS.
  • TTF (True Type) è il formato più diffuso. È riconosciuto da: Microsoft Internet Explorer (dalla versione 9), Mozilla Firefox, Google Chrome, Opera, Safari.
  • OTF (Open Type) è supportato da Mozilla Firefox, Google Chrome, Opera (anche la versione mobile), Safari.
  • WOFF (Web Open Font Format) è il formato standard per il web ma al momento è supportato da:, Mozilla Firefox, Google Chrome, Microsoft Internet Explorer (dalla versione 9), Safari (dalla versione 5.1), Opera (dalla versione 11.1).

Per visualizzare correttamente i webfonts in tutti i browser è necessario indicare almeno quattro formati: TTF o OTF (tutti i browser), WOFF (tutti i browser moderni), SVG (Safari per iOS) e EOT (Internet Explorer fino alla versione 8).

Il descrittore src consente di specificare più file, ciascuno indicato nella funzione url(), separati da virgole.

@font-face {
    font-family: 'ambleregular';
    src: url('Amble-Regular-webfont.eot') format('embedded-opentype'),
         url('Amble-Regular-webfont.woff') format('woff'),
         url('Amble-Regular-webfont.ttf') format('truetype'),
         url('Amble-Regular-webfont.svg#ambleregular') format('svg');
}

Il percorso di ciascun file è seguito dall’indicazione del formato che è opzionale ma si consiglia di utilizzarla perché i browser evitano di scaricare un file se non supportano il formato indicato in format().

Internet Explorer però non interpreta correttamente i descrittori src con percorsi multipli e considera il valore di src come un unico percorso. Per risolvere l’inconveniente è necessario modificare la regola come mostrato nell’esempio:

@font-face {
    font-family: 'ambleregular';
    src: url('Amble-Regular-webfont.eot');
    src: url('Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Amble-Regular-webfont.woff') format('woff'),
         url('Amble-Regular-webfont.ttf') format('truetype'),
         url('Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Il primo src è destinato Internet Explorer fino alla versione 8. Il descrittore contiene un solo url e Internet Explorer lo interpreta correttamente.

Il secondo src è per tutti gli altri browser ma deve essere nascosto a Internet Explorer (fino a IE 8) che ha già scaricato il file (EOT) e non deve leggere il secondo src. Per questo, al termine dell’url del file eot del secondo descrittore src, si aggiunge una stringa che inizia per ?# e che arresta la lettura dell’url da parte di Internet Explorer.

url('Amble-Regular-webfont.eot?#iefix') format('embedded-opentype')

Tutti gli altri browser ignorano il primo url (sia del primo che del secondo src) perché non corrisponde a un formato da loro supportato e continuano a cercare, nel descrittore src, un formato compatibile.

Ora la regola @font-face completa consente di visualizzare il nuovo font in tutti i browser.

@font-face {
    font-family: 'ambleregular';
    src: url('Amble-Regular-webfont.eot');
    src: url('Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Amble-Regular-webfont.woff') format('woff'),
         url('Amble-Regular-webfont.ttf') format('truetype'),
         url('Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

p{ font-family: 'ambleregular', Verdana, Geneva, sans-serif; }

Google Chrome non renderizza correttamente il formato WOFF ed è conveniente fare in modo che questo browser utilizzi, al suo posto, il formato SVG. Nella regola @font-face posizionare l’URL del formato SVG subito prima del formato WOFF.

@font-face {
  font-family: 'ambleregular';
  src: url('css/amble_regular/Amble-Regular-webfont.eot');
  src: url('css/amble_regular/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'), 
  url('css/amble_regular/Amble-Regular-webfont.svg#ambleregular') format('svg'), 
  url('css/amble_regular/Amble-Regular-webfont.woff') format('woff'),  
  url('css/amble_regular/Amble-Regular-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Per ulteriori approfondimenti consultare l’articolo Ottimizzare i webfonts in Chrome.

La licenza del font

Per utilizzare un font  come web fonts è necessario che il contratto di licenza lo preveda espressamente e ciò non accade con la maggioranza dei font attualmente disponibili che sono stati realizzati prima che fosse possibile usarli nel web.

Perciò prima di utilizzare un font leggere attentamente la licenza, detta in genere EULA (End User License Agreement), in cui deve essere esplicitamente consentito l’utilizzo come font incorporato in una pagina web.

Molti font sono rilasciati con la licenza SIL OFL. Per maggiori informazioni consultare la pagina SIL Open Font License di Wikipedia.

I web fonts e Font Squirrel

Per poter utilizzare con successo @font-face è necessario disporre dei diversi file che corrispondono ai diversi formati del font che s’intende utilizzare. Per la conversione dei font e non solo per questo si può utilizzare Font Squirrel che:

  • consente di scegliere tra una serie di font liberamente utilizzabili come font per il web, anche per fini commerciali
  • converte automaticamente i font nei diversi formati necessari
  • fornisce il foglio di stile con la regola @font-face già compilata

Usare Font Squirrel è molto semplice:

  1. Dalla home page di Font Squirrel, scegliere il tipo di carattere da utilizzare. In questo articolo si è utilizzato il carattere Amble.
  2. Selezionare il carattere per visualizzare i dettagli e poi fare clic su Webfont Kit. Selezionare i formati del font che si desidera scaricare ed, eventualmente, un sottoinsieme di caratteri per limitare le dimensioni dei file. Se per il font scelto non è disponibile il Webfont Kit si può scaricare il file disponibile (OTF o TTF), leggere la licenza e poi, utilizzare il Webfont Generator per creare tutti i file necessari (vedi oltre).

    I webfonts e Font Squirrel: Il kit del font

    I webfonts e Font Squirrel: Il kit del font

  3. Scaricare il @font-face kit. Decomprimere il file scaricato e al suo interno si troverà tutto il necessario per usare il font e, cioè: i file dei font nei formati necessari (TTF, WOFF, SVG, EOT), una pagina dimostrativa e il foglio di stile.

    I webfonts e Font Squirrel: il contenuto del kit

    I webfonts e Font Squirrel: il contenuto del kit

  4. Il foglio di stile contiene la regola @font-face già pronta per essere utilizzata. L’unica modifica che probabilmente sarà necessaria riguarda i percorsi dei file che dipenderanno dalla posizione in cui saranno salvati i file dei font.

    I webfonts e Font Squirrel: il foglio di stile con la regola @font-face

    I webfonts e Font Squirrel: il foglio di stile con la regola @font-face

Il web font generator è uno strumento di Font Squirrel per convertire un qualsiasi font negli altri formati. Per utilizzarlo è sufficiente aggiungere un font, modificare le opzioni (in caso di dubbi selezionare la voce optimal) e dichiarare che si sta utilizzando un font che ammette il suo utilizzo come web fonts.

I webfonts e Font Squirrel: il Webfont Generator di Font Squirrel

I webfonts e Font Squirrel: il Webfont Generator di Font Squirrel

Il file compresso scaricato contiene tutto il necessario per utilizzare il font.

Le alternative ai web fonts: Google fonts e Cufon

I web fonts non sono l’unico modo per utilizzare una famiglia di font diversa da quelle presenti nelle più diffuse piattaforme (web-safe fonts)

La prima è Google fonts che consiste in una raccolta di oltre 600 famiglie di caratteri ospitate nei server di Google. Per utilizzare uno di questi font è sufficiente includere l’elemento link che punta al font scelto e poi, utilizzare la nuova famiglia di caratteri nelle proprie regole css. Per ulteriori informazioni consulta l’articolo Usare i Google fonts.

Un altro metodo per usare font diversi da quelli installati nel sistema client è Cufon che trasforma il file di un font in un file javascript. Una libreria javascript (cufon-yui.js) renderà disponibile il font in modo che possa essere utilizzato per il testo del documento. Più macchinoso di Google fonts è però largamente supportato dalla maggioranza dei browser.

Risorse utili

  • CSS Fonts Module Level 3. W3C Candidate Recommendation 3 October 2013
  • Il sito caniuse.com per verificare la compatibilità dei web fonts con i vari browser.
  • Tra i sistemi commerciali si segnala TypeKit, interessante servizio di Adobe, che consente di avere a disposizione centinaia di famiglie di font di ottima qualità scegliendo tra diversi piani tariffari.