Web fonts con i CSS in cinque minuti

13 ottobre 2009

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.

Se vuoi aggiornamenti su Web fonts con i CSS in cinque minuti inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Web fonts con i CSS in cinque minuti

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy