Come inserire font non standard nelle pagine web

Uno dei problemi che i web designer affrontano più frequentemente è quello di trovarsi costretti ad utilizzare il solito numero limitato di font "sicuri", limitando la scelta ai soliti Arial, Verdana, Georgia, Courier New, Times New Roman e Trebuchet.

Per fortuna, le ultime generazioni di browser supportano la definizione @font-face, che consente di aggirare la limitazione.

Quali browser supportano @font-face? In che modo lo supportano?

Vediamoli uno ad uno:

Webkit/Safari
- supportato dalla versione 3.1
- formati di font supportati: TrueType/OpenType TT (.ttf) e OpenType PS (.otf).

Opera
- supportato da Opera 10 e successivi;
- formati di font supportati: TrueType/OpenType TT (.ttf) e OpenType PS (.otf).

Internet Explorer
- supportato da Internet Explorer 4 e successivi;
- formati di font supportati: Embedded OpenType (EOT) creato dal tool Microsoft WEFT.

Mozilla/Firefox
- supportato da Firefox 3.5 e successivi;
- formati di font supportati: TrueType/OpenType TT (.ttf) e OpenType PS (.otf).

Netscape
- supportato dalla versione 4, abbandonato con Netscape Navigator 6
- formati di font supportati: Portable Font Resource (.pfr).

Come fare

Come al solito, IE si comporta in maniera diversa dagli standard: per aggirare il problema sarà necessario trasformare il font anche nel formato EOT con il software Microsoft WEFT oppure, se non avete un sistema operativo Windows, con ttf2eot.

A questo punto, è necessario aggiungere la definizione nel proprio CSS sostituendo opportunamente le informazioni:
@font-face {
font-family: 'Nome del font';
src: url('url/nomedelfont.eot');
src: local('Nome del font Regular'), local('Nome del font'), url('url/nomedelfont.ttf') format('truetype');
}

Ho utilizzato questa soluzione su Alta Sartoria per il font Cibreo e su questo stesso sito per il font Bebas.

Un'ottima alternativa per chi ha poco tempo da perdere è quella di connettersi al sito Font Squirrel e farsi trasformare i file e compilare i CSS in automatico!!!