Web fonts con i CSS in cinque minuti

Stanchi dei soliti Verdana, Arial e Georgia? Se la risposta è sì, è bene sapere che oggi è finalmente giunto il momento in cui osare, parlando di tipografia sul web, si può. Per usare i vostri font preferiti e servirli all'utente in un modo facile ed efficace, non è più necessario ricorrere a tecniche alternative come la sIFR, possiamo affidarci a quanto fissato nelle specifiche CSS (2 e 3) a proposito dei cosiddetti web fonts.

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

Il fatto che sia un argomento caldo di questi mesi non significa che sia una novità. La svolta deriva dal fatto che oggi è estesa praticamente a tutti i principali browser la possibilità di sfruttare il download di font. Tutto quello che andremo a vedere in questo articolo funziona infatti su Internet Explorer 4 e versioni successive, Firefox 3.5, Safari 3.1 e versioni successive, Opera 10. Al momento su Google Chrome il supporto dei web fonts può essere attivato seguendo queste istruzioni, ma è presumibile che presto, in una delle prossime release, l'opzione sarà impostata di default.

Cosa ci serve: trovare i font giusti

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.

Tra i browser citati in precedenza, infatti, Firefox, Safari e Opera supportano i due formati di font più comuni, TrueType e OpenType. Internet Explorer, invece, supporta il formato EOT.

Significa che nel nostro CSS, se vogliamo servire a tutti i browser lo stesso font, dovremo far riferimento alla versione TrueType (oppure OpenType) e a quella EOT. Ciò comporta quasi sempre la necessità di dover convertire font TrueType/OpenType nel formato supportato da Microsoft. Possiamo farlo usando programmi specifici come TTF2EOT per la conversione da TrueType a EOT, e FontForge per la conversione da OpenType a EOT (ma in questo caso il font dovrà essere prima convertito in TrueType).

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 la versione TrueType e quella EOT del font, insieme a un CSS di esempio e a una demo. Comodissimo. Se intendete usare un font non reperibile su FontSquirrel, però, l'unica via che vi rimane è quella della conversione tra formati.

Per l'esempio che andremo a realizzare, abbiamo scaricato due kit, quello del font Black Rose e quello del font ArmWrestler.

Una volta scompattato il paccheto zip, è sufficiente prelevare i file con estensione .ttf ed .eot e inserirli nella cartella da cui saranno resi disponibili per il download all'utente.

Il CSS

Una volta stabilito il font (o i font) da usare, non rimane che mettere mano al nostro CSS. La regola di base che ci serve poggia sulla direttiva @font-face. Ecco il codice usato nell'esempio:

@font-face {
	font-family: 'ArmWrestler Bold';
	src: url('ArmWrestler.eot');
	src: local('ArmWrestler Bold'), url('ArmWrestler.ttf') format('truetype');
	}
@font-face {
	font-family: 'Black Rose Regular';
	src: url('BLACKR.eot');
	src: local('Black Rose Regular'), url('BLACKR.TTF') format('truetype');
}

Prima osservazione. Bisogna definire una regola @font-face per ciascun font che intendiamo utilizzare (nel nostro caso sono due).

E ora occhio all'ordine perché è cruciale:

1. con font-family assegniamo un nome al font; è quello che useremo successivamente quando dichiareremo nel foglio di stile la famiglia di font; 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;
3. infine, impostiamo l'URL del font in formato TrueType (o OpenType); la sintassi è diversa rispetto a quella vista in precedenza perché usando la direttiva local facciamo in modo che IE non scarichi anche la versione TTF del font consumando inutilmente banda e allungando i tempi di caricamento della pagina (per approfondimenti su questo aspetto rimando a questo post uscito sul nostro blog).

Fatto. Ora non ci resta che usare i nostri font nelle dichiarazioni CSS consuete. Nell'esempio abbiamo usato solo un elemento h1 e un paragrafo:

h1{font: 42px 'Black Rose Regular', Georgia, serif;}
p {font: 12px 'ArmWrestler Bold', Arial, 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.

I file usati nell'esempio sono disponibili per il download.