@font-face per tutti i browsers

4 anni fa

L’istruzione @font-face permette di inserire all’interno delle pagine web dei font diversi da quelli installati nel sistema operativo. Con il sempre maggiore supporto da parte dei browser di ultima generazione (anche IE, addirittura dalla vetusta versione 4!1) questa regola si sta diffondendo sempre più nelle creazioni dei designer più creativi.

L’unico problema nel suo utilizzo è che i browser la supportano in modi diversi, e quindi è stato necessario ingegnarsi per cercare una sintassi che funzionasse con la maggior parte di essi.
Seguendo un paio di suggerimenti (1, 2) ed il codice messo a disposizione da fontsquirrel.com sono riuscito ad inserire nel css un codice (per inserire il font Cantarell) che viene compreso da tutti i browser che ho provato (inclusi i malmostosi Epiphany e Midori).

Fontsquirrel è un sito da cui è possibile scaricare un gran numero di font, anche sotto forma di comodi archivi (@font-face Kit) contenenti sia i font che il codice css con l’istruzione @font-face necessaria per utilizzarli da subito nelle pagine web.
Nel mio caso (per il font “CantarellRegular” da applicare ai titoli) il codice è:

@font-face {
	font-family: 'CantarellRegular';
	src: url('Cantarell-Regular-webfont.eot');
	src: local('☺'), url('Cantarell-Regular-webfont.woff') format('woff'), url('Cantarell-Regular-webfont.ttf') format('truetype'), url('Cantarell-Regular-webfont.svg#webfontrnVBsed5') format('svg');
	font-weight: normal;
	font-style: normal;
}

Purtroppo il nuovo font non veniva visualizzato da Epiphany e Midori, e ho dovuto modificare il codice in questo modo (con un’opportuna istruzione supplementare per IE, come spiegato qui):

@font-face{ /* for IE */
font-family:CantarellRegular;
src:url(Cantarell-Regular-webfont.eot);
}
@font-face { /* for non-IE */
	font-family:CantarellRegular;
	src:url(http://:/) format("No-IE-404"), url(Cantarell-Regular-webfont.ttf) format("truetype"),
	url('Cantarell-Regular-webfont.woff') format('woff'), url('Cantarell-Regular-webfont.ttf') format('truetype'), url('Cantarell-Regular-webfont.svg#webfontqbhbiqKP') format('svg');
}

Per chi vuole usare @font-face questo sistema è probabilmente quello migliore (ed assicura maggiore compatibilità tra browser anche rispetto ai font messi a disposizione da Google con la “Google Font API“).

[1] questa deve essere la prima volta in assoluto che parlo bene del venefico browser di Microsoft :-)