Dopo aver visto come utilizzare un particolare font in un sito web, ci siamo scontrati con la carenza di uniformità di supporto sui tipi di font (.eot, .otf, .ttf. ecc.) da parte dei browser. Dobbiamo quindi trovare un modo per trasformare il nostro font nei vari formati.

Se si avesse a disposizione un font di qualunque genere e lo si volesse rendere disponibile per ogni piattaforma e browser, possiamo ricorrere ad un convertitore online: uno dei più popolari è sicuramente FontSquirrel. Cosa permette di fare questo tool online? Scegliendo il carattere desiderato fra i molti font presenti nel suo archivio, possiamo scaricare il relativo pack contenente tutti i formati possibili, compreso il formato .svg ed il CSS con la proprietà @font-face già compilata.

Caricando sul nostro spazio remoto l'intera cartella con tutti i formati, ed inglobando le regole CSS nel nostro foglio di stile, avremo una ragionevole certezza di far apparire il sito esattamente come è stato progettato.

Ma c'è di più: se nell'archivio base di FontSquirrell non fosse presente il font desiderato, possiamo utilizzare il Font-Face Generator: caricando il nostro font mono-formato, otterremo una conversione diretta in tutti gli altri formati mancanti.

Se questi procedimenti fossero troppo laboriosi per i nostri gusti, possiamo chiedere aiuto all'onnipresente Google. Dopo aver messo a disposizione online i più importanti framework javascript, Google ci aiuta nell'utilizzo dei font e nel risparmio della banda del nostro hosting tramite Google Web Fonts.

In questo archivio di font sarà sufficiente individuare il tipo di carattere desiderato ed inserire nella pagina HTML un codice simile a questo:

<link href='http://fonts.googleapis.com/css?family=<strong><span id="urlFamily">Shadows+Into+Light</span></strong>' rel='stylesheet' type='text/css'>

per far scaricare sul client il font indicato nella querystring "family", nel nostro specifico caso "Shadow Into Light". Successivamente basterà assegnare il font ad un elemento HTML indicando nel CSS qualcosa di simile:

p { font-family: '<span>Shadows Into Light</span>', arial, serif; }

Non dovremo preoccuparci di nulla, perchè i font saranno in automatico convertiti ed inviati sul Client consentendo una corretta visualizzazione.

Per variare il font dell'elemento sarà sufficiente cambiare nome all'attributo "family", per importare un diverso font, e modificare il valore della proprietà CSS "font-family", per attribuire il nuovo font.