Avete visto con i vostri occhi che sotto Internet Explorer 10, fino a ieri, non si riusciva – almeno su questo blog – a visualizzare correttamente i font personalizzati. Francamente mi sembrava strano e allora mi sono messo a far prove, testando ogni singola proposta che ho trovato in giro googlando. Alla fine dovrei essere arrivato alla soluzione. Vediamo:

Questo è un paragrafo scritto utilizzando il font Apple Garamond Light, che con ogni probabilità non avete installato su Windows, giacché è specifico di Apple. Ciò nonostante, dovrebbe essere visualizzato correttamente.

Allora, specie se il paragrafo qui sopra lo vedete con un font diverso da quello di questo paragrafo, aprite bene le orecchie, anzi, gli occhi.

Internet Explorer 10

Il maledetto non ha bisogno del file CSS specifico per IE9, IE8 e precedenti. Vuole, però, la definizione del font specificamente caricato fatta per esteso, all’interno del normale foglio di stile (o un “sub-foglio” caricato con l’inclusione, non importa). Devono essere definiti i file .ttf, .eot, .svg .otf e .woff che, probabilmente, non avrete “al gran completo”.

In tal caso, prendete il file .ttf con il font TrueType e provvedete online a tutte le conversioni necessarie mediante Font2Web.com: si fa in un attimo. Poi, caricate tutti i file sul vostro Host, a far compagnia al TrueType che avete (stessa cartella). Questo risolverà il problema per Internet Explorer 10 e anche per tutti gli altri browser, dal momento che include il TrueType, ma non (eh eh… e che credevate?) per:

Internet Explorer 9, 8 e (presumo) precedenti

Eh, no: le versioni precedenti, per funzionare, si “accontentano” del solito file eccezione, che nel vostro Header HTML sarà preceduto dal solito “<!–[if IE]> … ecc.” nel quale deve essere definito, per ogni font, il relativo file .eot corrispondente. Vale a dire,

Esempio

Mettiamo che abbiate, appunto, il file “base” con il font Apple Garamond Light, chiamato apple-garamond-light.ttf come unica dotazione. Dopo aver convertito e caricato tutto sull’Host, dovrete avere:

Nel vostro header HTML:

...

<link rel="stylesheet" href="/percorso/custom-fonts.css" type="text/css" media="all"/>
<!--[if IE]>
<link rel="stylesheet" href="/percorso/custom-fonts-ie.css" type="text/css" media="all"/>
<![endif]-->

...

naturalmente sostituite a “/percorso” il vostro reale percorso per raggiungere il file. Invece, i due file “custom-fonts.css” e “custom-fonts-ie.css” saranno i due file in cui caricherete le istruzioni per i font. Ossia:

In custom-fonts-ie.css:

}
@font-face {
	font-family: "Apple Garamond Light";
	src: url("/percorso-fonts/apple-garamond-light.eot");
}

E in custom-fonts.css:

@font-face {
    font-family:"Apple Garamond Light";
    src:url(/percorso-fonts/apple-garamond-light.ttf) format("truetype"),
	url(/percorso-fonts/apple-garamond-light.eot) format("embedded-opentype"),
        url(/percorso-fonts/apple-garamond-light.svg) format("svg"),
        url(/percorso-fonts/apple-garamond-light.otf) format("opentype"),
        url(/percorso-fonts/apple-garamond-light.woff) format("woff");
}

naturalmente sostituendo a “/percorso-fonts” il vero percorso per raggiungere i file con i vostri font. Dopo aver fatto questa modifica qui sul blog, ho provato con:

1. Safari
2. Opera
3. Chrome
4. Firefox
5. Internet Explorer 8
6. Internet Explorer 9
7. Internet Explorer 10

e come si può osservare qui di seguito, pare che funzioni dappertutto. Del resto, si tratta di mettersi lì e provarci: questi maledetti una ne pensano e cento ne fanno. Ecco qui (prosegue dopo le immagini):

Safari

Opera

Chrome

Firefox

Internet Explorer 8

Internet Explorer 9

Internet Explorer 10

Nota bene: non ho fatto prove con versioni di IE inferiori alla 8 perché a) non ce l’ho, b) credo ormai siano versioni definitivamente morte, c) perché davvero chi usa ancora IE7 o inferiori mi sa un po’ di sfigato, come dice qualcuno.

Insomma, niente da fare: ancora non possiamo toglierci dai piedi la fastidiosissima eccezione di stile quando si ha a che fare con Internet Explorer, almeno fin quando non spariranno dalla circolazione tutte le versioni inferiori alla 10. Dannazione, Microsoft… e cresci, una buona volta: non farle più queste cose.

Ok? D’accordo, è quello che hai appena fatto. Pensarci prima no, vero?

Marco V. Principato (919 Posts)

Informatico sin dal 1980, ha quasi sempre svolto questa attività sia nella Pubblica Amministrazione che fuori. Ora libero professionista, studia Scienze della Comunicazione e si dedica alla donna della sua vita, ai suoi hobby e ai suoi siti.

Etichette: Browser,css,font,ie10,microsoft