Telefono: +39 392 33 73 731

Bug fix: cross browser @font-face

Con CSS3 è oggi possibile utilizzare dei font particolari per i propri siti web, cosa che in passato era possibile solo convertendo i testi in immagine, oppure usando file Flash, o con delle tecniche di "replace" via javascript e dei file Flash che contenevano i font. Tutte tecniche dal mio punto di vista sconsigliate, a causa di vari effetti collaterali.
La soluzione migliore restava mantenere font sicuri per il web (Arial, Verdana, sans-serif oppure Times New Roman, Georgia, serif).

Oggi inserire un proprio font nel sito è facile, basta usare la regola CSS "@font-face", la quale serve a caricare un file font da utilizzare nel browser. Con una rapida ricerca in Google trovate numerosi siti ed esempi, alcuni funzionanti altri meno.
Purtroppo i browser non sono stati subito d'accordo con un singolo formato di file da utilizzare, ne abbiamo 4: EOT, TTF, WOFF, SVG. La tendenza è supportare WOFF, che è il formato più recente, sicuro ed adatto (la compatibilità del WOFF a questo sito http://caniuse.com/woff).

Però almeno per il momento dobbiamo caricare anche gli altri formati, con i dovuti trucchi, per essere davvero cross browser e mantenere una certa retro compatibilità. La compatibilità nei vari browser è come da tabella seguente.

Browser EOT TTF WOFF SVG
Firefox inferiore a 3.5   X    
Firefox superiore a 3.5, Internet exploer 9 e superiore, Safari dal 5.1, Chrome dal 5     X  
Internet explorer inferiore a 9 X      
Chrome, Safari, Opera   X    
Webkit, Opera dalla versione 10       X
iPhone e iPad       X

Lo scopo del mio articolo è trovare il metodo più semplice ed efficace per includere il font.

I servizi on-line

Il metodo più veloce e semplice sarebbe usare Google Fonts (http://www.google.com/webfonts), sono una serie di font precotti, e gestiti da Google dinamicamente, nel senso che basta includere in head della pagina una stringa di codice, la quale restituisce il file CSS giusto in base al browser dell'utente. La stringa è simile alla seguente.

<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'>

<style>
/* Per utilizzare questo font, basta fare nel CSS il richiamo, ad esempio: */
p{
font-family: 'Kavoon', cursive;
}
</style>

Però potremmo anche voler fare a meno di Google ed arrangiarci con file propri, caricati nel proprio spazio web, in questo caso un servizio molto bello è Font Squirrel (http://www.fontsquirrel.com), possiamo cercare nella loro ricca collezione il font che ci serve, cliccare "font-kit" e poi scaricare il file zip contenente tutti i file font necessari, il css preimpostato, ed una pagina html di esempio (prima del download selezionate "Dont' Subset" perché negli altri casi riducete i glifi).

Se non troviamo il font che vogliamo, e ne abbiamo uno nostro, possiamo usare il generatore, presente sempre in questo sito. Da sottolineare che Font Squirrel non metterà il vostro font nella sua collezione, non lo tratterrà ne' userà in alcun modo e dopo circa 30 minuti lo rimuoverà dal suo server.

Infine, voglio indicare anche Font2Web (http://font2web.com/) e CodeAndMore (http://fontface.codeandmore.com/) che sono semplicemente dei convertitori, caricando il font (TTF o OTF) loro restituiscono il kit da usare nel web.

Il codice CSS da usare

Eccoci alla parte più interessante, trovare il codice milgiore per l'implementazione nelle pagine web.
Nel caso usiate Google Font questa cosa non vi passa nemmeno per la mente, perché del CSS se ne occupa lui dinamicamente. Negli altri casi vi basta "guardare e non toccare", cioè copiate i file scaricati così come forniti dai convertitori senza pensarci sopra.

Tuttavia possiamo anche cercare di interessarci alla faccenda, il miglior codice CSS compatto e cross browser che ho trovato era questo:

 

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}
/* 
la sintassi prevede un doppio src, nel quale si specifica sempre un eot, questo per delle differenze nei browser IE 
*/

Ho detto che il codice "era" questo perché in alcuni casi ho notato dei bug, IE non sempre ubbidiva ai fix (e nemmeno Chrome per qualche motivo interpretava bene questo codice, presumo sia a causa del doppio src). Quindi ho deciso di fare alla vecchia maniera, e cioè dividere in due il css e dare a Cesare quel che è di Cesare.
Ho quindi inserito nell'head della pagina un commento condizionale come il seguente.

 

<link rel="stylesheet" href="css/screen.css" media="screen">
<!--[if IE]><link rel="stylesheet" href="css/iefix.css" media="screen"><![endif]-->

Seguendo questo esempio quindi tutti i browser moderni caricano screen.css, il quale conterrà il seguente CSS privo di EOT (il quale è cmq specifico per IE, ed obsoleto).

 

@font-face {
    font-family:'customfont';
    src:  url('fonts/myfont.woff') format('woff'),
    url('fonts/myfont.ttf') format('truetype'),
    url('fonts/myfont.svg#myfont') format('svg');
    font-style: normal;
    font-weight:normal;
}

Mentre nel caso si tratti di Internet Explorer verrà caricato iefix.css, che sovrascriverà la regola precedente e conterrà il seguente codice con solo il caricamento EOT.

 

@font-face {
    font-family:'customfont';
    src: url('fonts/myfont.eot') !important;
    font-style: normal;
    font-weight:normal;
}

In questa maniera non ho trovato bug, il font è stato caricato correttamente in tutti i browser dei miei test ed anche in Android. Quidi tra le varie opzioni compatte proposte dalla gente, e dai generatori di font, penso di rimanere fedele alla distinzione dei file CSS traminte commenti condizionali.

 

Lunedì 28 Gennaio 2013
(0 commenti)
CSS

Aggiungi un commento

Nome
E-mail (non verrà pubblicata)
Sito Web
Commento