Introduzione ai web fonts

Un grosso problema per un web designer alle prese con la realizzazione grafica di un sito è quello di scegliere un font piacevole, che corrisponda al carattere del sito, ma soprattutto che sia incluso nella maggior parte – o ancora meglio nella totalità – dei browser e sistemi operativi. E’ inutile scegliere un bellissimo ed elaborato font per i nostri titoli, solo per scoprire che su Ubuntu viene visualizzato come un semplicissimo Times New Roman (o qualcosa di simile) perchè quel tal carattere non è installato.

In tal caso non ci resta altro che suggerire a ciascun utente di scaricarsi il font, così poi vedrà il nostro sito correttamente. 🙂

Ok, non è proprio così, ma la strada è quella giusta. E’ un concetto simile quello alla base dei web fonts, che introduciamo nel resto dell’articolo.

Con il termine web fonts, infatti, NON si intendono delle famiglie di font particolari, magari ottimizzati per il web; ma semplicemente un sistema per cui tali font vengono scaricati direttamente dal web. E perchè no? Nel nostro sito già facciamo scaricare immagini, CSS, JavaScript, filmati Flash… non è certo la definizione di un carattere quella che occuperà il maggior spazio.

Quindi, sì: è possibile definire il font che vogliamo e fare in modo che il browser dell’utente lo scarichi automaticamente.

@font-face

Con la direttiva @font-face possiamo indicare non solo una famiglia di caratteri ma anche una sorgente per il file di definizione di tale famiglia:

@font-face {
font-family: “Kimberley”;
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format(“truetype”);
}

Nell’esempio riportato – tratto da questo articolo su A List Apart – viene definito un certo font Kimberley e l’URL da cui è possibile indicare il relativo file di definizione.

Fatto?

EOT vs. TTF

Purtroppo non tutti i browser ancora lavorano alla stessa maniera, e il formato di font riconosciuto da Internet Explorer non è lo stesso riconosciuto dagli altri. Il browser di casa Microsoft vuole infatti una versione EOT contro la più classica TTF.

Fortunatamente, stanno crescendo ampi repository di font gratuiti per il web disponibili in entrambe le versioni, come Font Squirrel, che è stato segnalato recentemente anche da HTML.it.