Risoluzione dei problemi relativi ai web fonts

I web fonts dei CSS3 sono sicuramente la soluzione ideale per aggiungere un livello in più al design dei nostri siti web. Tuttavia, a volte possono verificarsi dei problemi. Vediamo quali e quali sono le soluzioni.

I font non vengono visualizzati in nessun browser

Controllate che:

1. i percorsi dei file siano corretti
2. i link ai file nel CSS siano corretti
3. non vi siano direttive del server (per esempio nel file .htaccess) che intercettino le richieste

La sintassi corretta per la regola @font-face è la seguente:

@font-face{ 
	font-family: 'MyWebFont';
	src: url('WebFont.eot');
	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
	     url('WebFont.woff') format('woff'),
	     url('WebFont.ttf') format('truetype'),
	     url('WebFont.svg#webfont') format('svg');
}

Salvate questa regola in un file CSS e inseritelo nella directory dei font. Quindi potete includerlo come:

<link rel="stylesheet" href="webfont.css" type="text/css" />

oppure all'inizio del CSS principale:

@import url(webfont.css);

Quindi dovete modificare le regole del vostro foglio di stile:

body {
	font-family: 'MyWebFont', sans-serif;
}

I font non vengono visualizzati su iPhone o iPad

In questo caso è probabile che stiate usando un server IIS che ha bisogno che voi specifichiate il corretto MIME Type per il formato SVG dei font. In questo caso dovete impostare il MIME Type di SVG come image/svg+xml.

I font non vengono visualizzati in Firefox

Controllate che:

1. la versione in uso sia uguale o superiore alla 3.5
2. non stiate servendo i font da un dominio diverso da quello corrente
3. non siate su un server IIS (nel qual caso dovete usare il formato WOFF)

I font non vengono visualizzati in Internet Explorer

Controllate che:

1. non stiate usando un emulatore
2. non stiate servendo i font da un dominio diverso da quello corrente (per IE9)