Introduzione

La tipologia di font da usare su una pagina web ha sempre rappresentato una grossa limitazione per i webmaster, che guardavano sempre con invidia la libertà di movimento dei grafici tradizionali nella scelta del carattere.

Il supporto quasi inesistente a font "diversi" e l'utopica speranza che un utente scaricasse il font adatto a vedere il nostro sito "come dovrebbe essere" ci aveva costretto a scegliere soltanto all'interno della classica rosa: Times New Roman, Courier, Georgia, Arial, Helvetica, Verdana e Tahoma, con la recente aggiunta di Trebuchet e Lucida.

L'alternativa era (è) ricorrere a Photoshop e all'image replacement, per garantire la presenza di testo utile ai motori di ricerca.

La proprietà @font-face, già presente nelle specifiche CSS2, è stata riproposta con CSS3; a cambiare, una volta tanto, sono però stati i browser migliorando il supporto a tale proprietà e permettendo agli sviluppatori una notevole libertà creativa.

Utilizzo di @font-face

Ecco come utilizzare @font-face in maniera veloce (funziona solo su Firefox 3.6, Opera e Chrome):

@font-face {<br />    font-family: "IndubitablyRegular";<br />    src: url("/font/INDUBITA-webfont.ttf") format("truetype");<br />    }<br />    .myfont {font-family:IndubitablyRegular, "Times New Roman", serif;}

Tramite la proprietà @font-face specifichiamo il nome del font che sarà scaricato sulla macchina dell'utente ed il percorso dal quale prelevarlo abbinato al tipo di formato del font; possiamo anche indicare un URL assoluto dove reperire il font, a patto che ne abbiamo il diritto. A questo punto possiamo creare una qualunque classe impostando come font quello su indicato ed il gioco è fatto.

Come per i formati audio-video ed i loro rispettivi codec da aggiungere ai player, anche per i font c'è da considerare che non tutti i tipi vengono letti da ogni browser. Fino a poco tempo fa lo standard più diffuso era il True Type Font (.ttf) in compagnia dell'Open Type Font (.otf), interpretato da tutti i maggiori browser ad eccezione di IE.
Per il browser Microsoft si doveva ricorrere all'Embedded Open Type Font (.eot), un formato similare; da 1 anno circa è stato introdotto il nuovo Web Open Font Format (.woff) per mettere d'accordo i 5 browser principali (IE, Firefox, Safari, Opera e Chrome).

Ecco un esempio completo con @font-face ed il relativo codice:

 @font-face {<br />        font-family: "IndubitablyRegular";<br />        src: url("/font/INDUBITA-webfont.eot");<br />        src: url("/font/INDUBITA-webfont.eot?#iefix") format("embedded-opentype"),<br />             url("/font/INDUBITA-webfont.woff") format("woff"),<br />             url("/font/INDUBITA-webfont.ttf") format("truetype"),<br />             url("/font/INDUBITA-webfont.svg#IndubitablyRegular") format("svg");<br />             src: local("IndubitablyRegular"), url("/font/INDUBITA-webfont.ttf") format("truetype");<br />    }<br />    .myfont {<br />        font-family:IndubitablyRegular, serif;<br />        }

Rispetto al precedente codice abbiamo aggiunto una dichiarazione che scarica ogni diverso tipo di font in modo da renderlo fruibile da tutti i browser; grazie all'embedded opentype l'esempio è visibile anche su IE6! Inoltre abbiamo inserito il "src:local" che prova a cercare sulla macchina l'eventuale presenza del font: se non lo trovasse andrebbe a scaricarlo all'URL indicata.

Nel caso in cui volessimo usare grassetti e corsivi non artefatti (ovvero generati in maniera forzata dal browser in presenza dei relativi tag HTML) dovremo scaricare la versione apposita del font  (se esistente, ad esempio: INDUBITA-bold-webfont o INDUBITA-italic-webfont) ed indicarla come regola aggiuntiva per i tag strong ed em.

Pro e contro

Il vantaggio di utilizzare font diversi è innegabile dal punto di vista estetico; ricorrere a @font-face può attualmente essere una pratica consigliata e degradabile (senza CSS si vedrà un font standard ed il contenuto sarà salvo), rinunciando a caricare immagini pesanti.
Inoltre si potranno abbandonare tecniche alternative quali Cufon e incorporamenti con flash + javascript che, oltre ad essere pesanti in termine di codice, non garantiscono riuscita al 100%.

Il contro può essere rappresentato a volte dal peso del pacchetto di font da scaricare: il download di un font medio (40Kb-50kb) può essere inutile se tale font venisse usato solo per il titolo del nostro sito, basterebbe infatti usare un'immagine da circa 10-15Kb ed accompagnarla da image-replacement.

Nel prossimo articolo vedremo come perfezionare la scrittura di codice ed il reperimento dei formati di font.