Font non di sistema con i CSS3

Con i CSS3 è possibile incorporare font non di sistema nelle nostre pagine web.

Naturalmente rimane grave il problema di retrocompatibilità, infatti adottando questo metodo tutti i browser non in grado di interpretare CSS3 non applicheranno la regola in questione.

In attesa di uno 'svecchiamento' dei browser montati sui PC degli utenti Internet, rimane consigliabile usare dei Javascript (ad esempio Cufon, di cui ho recentemente parlato) o utilizzare la libreria di font online fornita da Google Font Api.

Ad ogni buon conto vediamo come utilizzare CSS3 per il caricamento di font non di sistema.

Come spesso accade abbiamo a che fare con le peculiarità di Internet Explorer, per cui non sarà sufficiente caricare sul webserver il formato TTF (utilizzato da tutti i browser eccetto IE) ma occorerrà caricare anche il formato EOT!

Qui potete trovare un generatore online (da leggere bene le specifiche dei diversi formati proposti).

Ed ecco finalmente la sintassi da utilizzare con i CSS3:

@font-face { /* definisco la family e il file da utilizzare */
    font-family: 'Cartoon';
    src: url('BD_Cartoon_Shout.eot'); /* formato EOT per Internet Explorer */
    src: local('Cartoon'), url('BD_Cartoon_Shout.ttf') format('truetype'); /* formato TrueType (o OpenType), usando la direttiva local IE non scarica anche la versione TTF */
    }

h1 { /* applico la nuova family creata all'elemento h1*/
font-family: 'Cartoon', serif;
padding: 6px;
text-align: center;
}