Il modo migliore per usare @font-face

Nel post in cui abbiamo segnalato il sito Font Squirrel era presente anche uno snippet di codice esemplificativo per illustrare rapidamente la necessità  di dover caricare due diversi formati di font, EOT per Internet Explorer, TTF per gli altri.

Nei commenti al post e poi in un intervento sul suo blog Andrea Giammarchi ha evidenziato come quella modalità  di incorporamento dei font sia poco efficiente. In sintesi: IE, anche se utilizza il font in formato EOT, scaricherà  comunque quello in formato TTF, con ovvie conseguenze sui tempi di caricamento.

àˆ possibile usare i commenti condizionali per servire un CSS ad hoc per IE, ma dai test effettuati dallo stesso Andrea la tecnica migliore è questa (riporto lo snippet dal suo post traducendo i commenti):

@font-face {
    // qui si definisce il nome del font per usarlo successivamente come font-family
    font-family: "uni05_53";
    // qui si definisce il font EOT per IE che ignora completamente la direttiva local()
    src: url(../font/uni05/uni05_53.eot);
    // usiamo local() per fare in modo che IE salti questa riga e
    // ridefiniamo l'url per questo font affinché
    // altri browser scarichino *solo* questo font invece che 2
    src: local("uni05_53"), url(../font/uni05/uni05_53.ttf) format("truetype");
}

Per i dettagli più tecnici e per altri riferimenti vi rimando nuovamente al post di Andrea.