Web fonts con @font-face

Stanchi dei soliti Verdana, Arial e Times New Roman? Se la risposta è sì, il modulo CSS Fonts dei CSS3 vi offre la soluzione. Grazie alla direttiva @font-face, infatti, possiamo usare i nostri font preferiti e servirli all'utente in un modo facile e veloce. Non è più necessario ricorrere a tecniche alternative come la sIFR, possiamo affidarci a quanto fissato nelle specifiche del W3C a proposito dei cosiddetti web fonts.

Con questa definizione ci si riferisce di solito ai font che l'utente può scaricare per visualizzare una pagina secondo le caratteristiche tipografiche fissate dall'autore nel foglio di stile.

Questa funzionalità era già prevista nei CSS 2, ma era stata poi eliminata nella specifica CSS 2.1. Ora, finalmente si direbbe, ha trovato un posto definitivo tra gli standard per il web nei CSS3.

Tra l'altro, i web fonts caricati con @font-face sono supportati da anni, dalla versione 4.0, sul browser più diffuso: Internet Explorer. Negli ultimi 2/3 anni si sono accodati tutti gli altri produttori, e oggi non c'è davvero più alcun motivo che possa far esitare uno sviluppatore o un designer davanti alla possibilità di sfruttare questa tecnica.

Cosa ci serve: trovare i font giusti nel formato giusto

Per usare i web fonts, l'unica cosa di cui abbiamo bisogno è... un font! Ma attenzione! Non tutti i font possono essere liberamente distribuiti, essendo la maggior parte protetti da ferree licenze commerciali relative al loro uso. Niente paura però. Per fortuna non mancano sul web eccellenti risorse a cui attingere per trovare font liberamente distribuibili e utilizzabili. Un sito da cui partire è FontSquirrel. Non solo offre una vasta collezione di interessanti caratteri tipografici, ma può aiutarci a superare un grosso ostacolo: quello della compatibilità cross-browser dei formati di font.

Tramite @font-face possiamo utilizzare font in questi formati: TrueType (TTF), OpenType (OTF), WOFF, SVG, Embedded OpenType (EOT).

Purtroppo il supporto sui principali browser non è omogeneo. Ecco una tabella riassuntiva:

Formato
TTF/OTF	9.0+	3.5+	3.1+	4.0+	10.0+
WOFF	9.0+	3.6+	No	6.0+	No
SVG	No	3.5+	3.1+	0.3+	9.0+
EOT	4.0+	No	No	No	No

Si capisce che volendo garantire una compatibilità cross-browser il più ampia possibile è necessario usare un set di font che comprenda almeno tre di questi formati. Di norma un kit di font da usare con @font-face comprende la versione TrueType/OpenType, quella WOFF e quella EOT.

Un po' complicato vero? Ecco allora come FontSquirrel può venirci in aiuto. Il sito offre per ciascun font la possibilità di scaricare un pacchetto zip chiamato 'kit'. Ogni kit contiene tutte le versioni di un font, insieme a un CSS di esempio e a una demo.

Può però darsi che ci troviamo in possesso di un font in formato WOFF o TTF o OTF prelevato da un altro sito. Che fare? L'unica via è quella della conversione. Il solito FontSquirrel viene ancora una volta in nostro soccorso con questo @font-face Generator.

@font-face nei CSS

Per l'esempio che andremo a realizzare useremo il font ArmWrestler.

Per il codice CSS abbiamo usato la sintassi ottimizzata definita in questo articolo di Paul Irish: consigliamo vivamente di utilizzarla sempre quando si intenda sfruttare @font-face per servire un font all'utente.

@font-face {
  font-family: 'ArmWrestler';
  src: url('armwrestler-webfont.eot'); /* per IE 5-8 */
  src: local('☺'), /* direttiva local per IE */
  url('armwrestler-webfont.woff') format('woff'),    /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */
        url('armwrestler-webfont.ttf') format('truetype'); /* Opera, Safari */
}

Prima osservazione. Bisogna definire una regola @font-face per ciascun font che intendiamo utilizzare.

E ora occhio all'ordine perché è cruciale:

1. Con font-family assegniamo un nome al font; è il nome che useremo successivamente quando dichiareremo nel foglio di stile la font-family; possiamo assegnare qualunque nome, ma è sempre conveniente fare riferimento a quello ufficiale del font.
2. Subito dopo, con il primo src, definiamo l'URL del font in formato EOT per Internet Explorer 5-8.
3. Nella riga successiva definiamo un nuovo attributo src, usando prima di tutto la direttiva local tramite la quale facciamo in modo che IE non scarichi anche la versione TTF del font consumando inutilmente banda e allungando i tempi di caricamento della pagina. Nell'ultima versione della sua sintassi ottimizzata per @font-face, Paul Irish consiglia di assegnare come valore della direttiva local uno smiley (per inserirlo rapidamente da tastiera su Windows basterà usare la combinazione ALT + 1 del tastierino numerico).
4. Infine, impostiamo l'URL del font in formato WOFF e quello per il formato TrueType.

Fatto. Ora non ci resta che usare i nostri font nelle dichiarazioni CSS consuete. Nell'esempio abbiamo usato solo questa regola:

body {
font: 14px ArmWrestler,Verdana, Arial, sans-serif;
}

Come si vede, nulla cambia rispetto a quanto già sappiamo. Ci siamo limitati ad aggiungere i nomi dei font stabiliti in precedenza e a impostare i font alternativi, più che mai necessari visto che chi non naviga con i browser già citati non potrà visualizzare i font scaricabili.

Questo è tutto. Il consiglio finale è di valutare sempre due elementi.

Intanto il peso in kb dei font. Font troppo pesanti, su connessioni lente, possono produrre un effetto poco gradevole: fino a quando il download non sarà completo, il testo non sarà disponibile all'utente, almeno alla prima visita, visto che il salvataggio nella cache risolve le cose per le visite successive.

La seconda cosa a cui prestare attenzione è la resa sulle diverse combinazioni browser/sistema operativo. Solo il test diretto potrà farci scoprire se uno specifico font risulta poco leggibile.

Tabella del supporto sui browser

Font e testo
@font-face	4.0+	3.5+	3.1+	4.0+	10.0+