@font-face è un’interessate caratteristica delle specifiche CSS3 che permette di caricare e di usare all’interno delle pagine web qualsiasi font non standard in maniera dinamica e scalabile. La proprietà @font-face è una delle regole appartenenti alle @-rules (@charset, @import, @media, @page, @font-face, @namespace) del CSS.
Alcuni benefici nell’uso di @font-face sono:
- piena compatibilità con gli strumenti di ricerca
- accessibilità e compatibilità con gli strumenti di screen readers
- il testo viene riconosciuto dai traduttori automatici (es. google traslate)
- pieno supporto per le proprietà CSS relative al testo: line-height, letter-spacing, text-shadow, text-align, e i selettori quali ::first-letter e ::first-line
Per includere un font in una pagina web si fa ricorso a questa semplice dichiarazione CSS; successivamente va richiamato il nome del font con la proprietà font-family nei selettori HTML.
@font-face {
font-family: 'font-custom';
src: url('font-custom.ttf');
}
h1, h2, h3 { font-family: 'font-custom', 'Georgia', serif; }
In questo caso nel blocco font-face abbiamo definito tramite font-family il nome del font che abbiamo chiamato “font-custom”; in src, invece abbiamo definito l’url (se i file si trovano nello stesso folder, non c’è bisogno di inserire un percorso relativo) e il nome del file TTF che indica al browser dove trovare il font. Da notare che avremmo potuto utilizzare qualsiasi altro nome per identificare il font.
Purtroppo i browser non sono tutti uguali e sarebbe necessario specificare altri formati di font (eot, otd, svg, etc…) assieme al TTF.
| otf & ttf | svg | woff | eot | |
|---|---|---|---|---|
| IE | IE9 | IE9 | IE5+ | |
| Firefox | FF3.5 | FF3.5 | FF3.6 | |
| Chrome | Chrome 4 | Chrome 0.3 | Chrome 5 | |
| Safari | 3.1 | 3.1 | ||
| Opera | Opera 10.00 | Opera 9 | ||
| iOS | iOS 1 | |||
| Android | 2.2 |
Esiste però una limitazione nel codice CSS sopra specificato. Infatti per i browser Internet Explorer 5 o 6, il true type non è supportato ma è necessario utilizzare il formato EOT. Come fare? Semplicemente accodare tutti i formati di font compatibili con gli altri browser, in questo modo:
font-face {
font-family: 'font-custom';
src: url('font-custom.eot'); /* IE 5-8 */
src: local('☺'), /* trucco per IE */
url('font-custom.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('font-custom.ttf') format('truetype'), /* Opera, Safari */
url('font-custom.svg#font') format('svg'); /* iOS */
}
Le due regole src, inserite in questo ordine, evitano inutili richieste HTTP ad Internet Explorer. Invertendo le regole il browser IE avrebbe prima caricato il file TTF (incompatibile, quindi un caricamento inutile) e poi avrebbe caricato il file EOT.
Esistono dei comodi tools online che vi semplificano la vita: basta dare in input il file TTF che volete convertire e il tool vi preparerà tutti gli formati e il codice CSS. Questa procedura è indispensabile per utilizzare i webfont al giorno d’oggi e massimizzare la compatibilità nelle varie piattaforme e browser.
Alcuni tools gratuiti:
http://www.fontsquirrel.com/tools/webfont-generator
Webfont services
Un certo numero di servizi online permettono di utilizzare @font-face tramite comode API, spesso con una sola riga di codice CSS o un piccolo script. Servizi come WebINK, Typekit, e Fontslive vi permettono di utilizzare font dietro il pagamento di un canone mensile ma vi garantiscono alcuni vantaggi: gestione del cross-browser, controllo sulle prestazioni e licenze d’uso
L’ API di Google Font consente di utilizzare liberamente un piccolo set di font attraverso il semplice collegamento ad un foglio di stile. Google gestisce in automatico le problematiche legate al cross browser e i vari problemi di prestazioni. E’ il modo sicuramente più semplice, gratuito e veloce per utilizzare i webfonts.
Inoltre, una sorpresa comune per gli sviluppatori è che acquistando la licenza d’uso di un carattere (da utilizzare nella progettazione grafica, per esempio), non significa che si può utilizzare anche in @font-face. Le licenze per @font-face (il cosidetto web embedding) sono in genere vendute separatamente. Prima di acquistare un font, bisogna quindi leggere il contratto con attenzione.
