CSS: ottimizzare la regola @font-face

CSS: ottimizzare la regola @font-face

This entry was posted on March 28th, 2011 and is filed under CSS, Font.

Benvenuto! Se è la prima volta che arrivi sul blog, magari ti interessa iscriverti al mio feed RSS per restare aggiornato.Powered by WP Greet Box WordPress Plugin

In un articolo per Html.it mi sono occupato della regola @font-face che ci consente di inserire font personalizzati all’interno delle nostre pagine web.

Questa tecnica, nonostante ci consente di personalizzare maggiormento lo stile delle pagine, presenta alcuni svantaggi. Primo tra tutti quello di avere la necessità di effettuare un’ulteriore richiesta HTTP per caricare il font di cui abbiamo bisogno. Un possibile (semplificato) esempio di utilizzo del @font-face potrebbe essere il seguente:

@font-face {
 font-family: 'font_name';
 src: url('font_name.otf') format('opentype');;
}

Possiamo notare che all’interno della proprietà src andiamo ad inserire il path del font che vogliamo utilizzare; questo vuol dire che abbiamo bisogno di effettuare la richiesta HTTP per caricare il font.

Base64

In un vecchio articolo su questo blog ho illustrato una tecnica per utilizzare la codifica base64 per includere immagini all’interno del CSS. Utilizzando lo stesso principio, applicheremo la codifica in base64 anche ai font così da poter sfruttare degli stessi vantaggi che abbiamo per le immagini:

• Si riduce il numero di richieste HTTP al server
• I file CSS possono essere salvati nella cache
• I file CSS possono essere compressi in GZIP

La nuova regola font-face, codificando il font in base64, diviene la seguente:

@font-face {
 font-family: 'font_name';
 src: url("data:font/opentype;base64,[codifica_in_base64]");
}

Notiamo che abbiamo sostituito la sola proprietà src in cui abbiamo inserito la codifica in base64.

Possiamo vedere un esempio della precedente regola al seguente link:

Demo

Conclusioni

Ho testato la tecnica con i seguenti browser: FF 3.6, Chrome, Safari, Opera senza riscontrare problemi di funzionamento.

La regola @font-face che abbiamo visto all’inizio è una versione semplificata poichè per funzionare correttamente su tutti i browser necessita, ad esempio, di un file .eot per Internet Explorer e, possibilmente, l’eventualità di far utilizzare al browser il font in locale nel caso fosse già installato nel sistema. Riguardo IE però, esso non supporta neppure la codifica base64, quindi, per questa tipologia di browser è necessario sfruttare il classico font esterno con estensione eot.

Bisogna infine considerare che includere più di un font nel file CSS aumenta di molto le dimensioni del file stesso e, di conseguenza, i tempi di caricamento della pagina. Bisogna quindi utilizzare con attenzione questa tecnica, onde evitare di avere effetti spiacevoli anzichè vantaggi.

Like this post? Share It! :)