Come far funzionare Google Fonts in IE?

Ho sviluppato un sito che utilizza l’ API di Google Fonts . È fantastico, e presumibilmente è stato testato in IE, ma quando si esegue il test in IE 8 i caratteri non vengono semplicemente ridisegnati.

Ho incluso il font, come indicato da Google, quindi:

 

e ha aggiunto il suo nome alla parte anteriore di una famiglia di font in CSS, quindi:

 body { font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif; font-size: 16px; overflow-y: scroll; overflow-x: hidden; color: #05121F; } 

Funziona come un fascino in Chrome, Firefox, Safari. Nessun dado in IE 8. Qualcuno sa perché?

Il metodo, come indicato dalla pagina delle considerazioni tecniche , è corretto, quindi non stai facendo assolutamente nulla di sbagliato. Tuttavia, questo bug report su Google Code indica che c’è un problema con i caratteri prodotti da Google per questo, in particolare la versione di IE. Questo sembra influenzare solo alcuni tipi di carattere, ma è un vero culo.

Le risposte sul thread indicano che il problema risiede nei file di Google pubblicati, quindi non c’è nulla che tu possa fare al riguardo. L’autore suggerisce di ottenere i font da posizioni alternative, come FontSquirrel , e di servirli localmente, nel qual caso potresti anche essere interessato a siti come League of Movable Type .

NB A partire da ottobre 2010 il problema è segnalato come risolto e chiuso nella segnalazione di bug di Google Code.

Sembra che IE8-IE7 non sia in grado di comprendere più stili di caratteri Web di Google tramite la stessa richiesta di file utilizzando i tag di link href .

Questi due collegamenti mi hanno aiutato a capirlo:

  • Vedi questo problema di Google aperto e guarda i commenti.
  • Vedi anche StackOverlow Answer Google Web Fonts non funziona in IE8

L’unico modo per farlo funzionare in IE7-IE8 è avere solo una richiesta di carattere Web di Google. E solo uno stile di carattere nella href del tag link :

Quindi normalmente avresti questo, dichiarando più stili di carattere nella stessa richiesta:

  

Ma in IE7-IE8 aggiungi un condizionale IE e specifichi ogni stile di carattere di Google separatamente e funzionerà:

  

Spero che questo possa aiutare gli altri!

Google Fonts utilizza Web Open Font Format (WOFF), che è buono, perché è il formato di font raccomandato dal W3C.

Le versioni di IE precedenti a IE9 non supportano il Web Open Font Format (WOFF) perché al momento non esisteva. Per supportare

Puoi convertire il tuo WOFF in EOT qui prima convertendolo in TTF e poi in EOT: http://convertfonts.com/

Quindi puoi servire il carattere EOT in questo modo:

 @font-face { font-family: 'MyFont'; src: url('myfont.eot'); } 

Ora funziona in

 src: url('myfont.woff') format('woff'), url('myfont.eot') format('embedded-opentype'); 

Tuttavia,

 myfont.woff') format('woff'), url('myfont.eot') format('embedded-opentype 

come l’URL del carattere. Possiamo risolvere questo problema specificando innanzitutto un src con un solo URL che è il formato EOT, quindi specificando una seconda proprietà src che è pensata per i browser moderni e

 src: url('myfont.eot'); src: url('myfont.woff') format('woff'); 

Quindi solo perché nella seconda proprietà src si specifica il format('woff') , myfont.woff’) format(‘woff url myfont.woff') format('woff ) e manterrà usando il primo specificato (eot).

Quindi ora i tuoi Webfonts di Google funzionano per

Per ulteriori informazioni su diversi tipi di font e supporto browser, leggi questo articolo perfetto di Alex Tatiyants: http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

Anche se la soluzione di Yi Jiang potrebbe funzionare, non credo che abbandonare l’API di Google Web Font sia la risposta giusta qui. Serviamo un file jQuery locale quando non è caricato correttamente dal CDN, giusto?

   

Quindi, perché non dovremmo fare lo stesso per i caratteri, in particolare per

   

Ecco il mio processo quando si utilizzano caratteri personalizzati:

  1. Scarica la cartella ZIP del font da Google e usa Font @ font-face Generator di Font Squirrel per creare il font web locale.
  2. Creare un file fonts.css che chiami i nuovi file di font ospitati localmente (collegandosi solo al file se

     @font-face { font-family: 'cardoitalic'; src: url('cardo-italic-webfont.eot'); src: url('cardo-italic-webfont.eot?#iefix') format('embedded-opentype'), url('cardo-italic-webfont.woff') format('woff'), url('cardo-italic-webfont.ttf') format('truetype'), url('cardo-italic-webfont.svg#cardoitalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'cardobold'; src: url('cardo-bold-webfont.eot'); src: url('cardo-bold-webfont.eot?#iefix') format('embedded-opentype'), url('cardo-bold-webfont.woff') format('woff'), url('cardo-bold-webfont.ttf') format('truetype'), url('cardo-bold-webfont.svg#cardobold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'cardoregular'; src: url('cardo-regular-webfont.eot'); src: url('cardo-regular-webfont.eot?#iefix') format('embedded-opentype'), url('cardo-regular-webfont.woff') format('woff'), url('cardo-regular-webfont.ttf') format('truetype'), url('cardo-regular-webfont.svg#cardoregular') format('svg'); font-weight: normal; font-style: normal; } 
  3. Usando le classi condizionali IE nel tuo foglio di stile principale per evitare gli stili e gli stili di finto , gli stili dei tuoi font potrebbero essere così:

     h1{ font-size:3.25em; font-weight:normal; font-style:italic; font-family:'Cardo','cardoitalic',serif; line-height:1.25em; } h2{ font-size:2.75em; font-weight:700; font-family:'Cardo','cardobold',serif; line-height:1.25em; } strong ,b{ font-family:'Cardo','cardobold',serif; font-weight:700, } .lt-ie9 h1{ font-style:normal; } .lt-ie9 h2{ font-weight:normal; } .lt-ie9 strong, .lt-ie9 b{ font-weight:normal, } 

Certo, è un po 'di lavoro in più, ma non ci aspettiamo questo da IE? Inoltre, diventa una seconda natura dopo un po '.

Per quello che vale, non ho potuto farlo funzionare su IE7 / 8/9 e l’opzione di dichiarazione multipla non ha fatto alcuna differenza.

La soluzione per me era il risultato delle istruzioni sulla pagina Considerazioni tecniche in cui si evidenzia …

Per la migliore visualizzazione in IE, fai in modo che il foglio di stile “link” tagga il primo elemento nella sezione “head” HTML.

Funziona su IE7 / 8/9 per me ora.

Ho provato tutte le opzioni dall’alto e non hanno funzionato. Poi ho individuato il carattere di google (Over the Rainbow) nella mia cartella (nuova) e ho utilizzato IE condizionale di seguito e ha funzionato perfettamente.

  

Spero che questo possa aiutare

Puoi provare fontsforweb.com dove i caratteri funzionano per tutti i browser, perché sono forniti nei formati TTF, WOFF ed EOT insieme al codice CSS pronto per essere incollato sulla tua pagina, ovvero

 @font-face{ font-family: "gothambold1"; src: url('http://fontsforweb.com/public/fonts/5903/gothambold1.eot'); src: local("Gotham-Bold"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.woff') format("woff"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.ttf') format("truetype"); } .fontsforweb_fontid_5903 { font-family: "gothambold1"; } 

oppure puoi scaricarli zippati in un pacchetto con file CSS allegato

quindi aggiungi semplicemente la class a qualsiasi elemento per applicare quel tipo di carattere

 

This will be written with Gotham Bold font and will work in all browsers

Guardalo funzionante: http://jsfiddle.net/SD4MP/

Si tratta di provare tutte quelle risposte, per me, niente funziona se non la prossima soluzione: suggerito dal carattere di Google

 @import 'https://fonts.googleapis.com/css?family=Assistant'; 

Ma sto usando qui i font in lingua straniera, e non ha funzionato solo su IE11. Ho scoperto questa soluzione che ha funzionato:

 @import 'https://fonts.googleapis.com/css?family=Assistant&subset=hebrew'; 

Spero che risparmi tempo prezioso per qualcuno

Prova questo tipo di collegamento, verrà eseguito anche in IE. spero che questo ti aiuti .

  

Ho avuto lo stesso problema con te. Ho trovato una soluzione utilizzando un codice di Adobe Web Fonts, funziona perfettamente con Internet Explorer, Chrome, Firefox e Safari.

Maggiori informazioni in questa pagina: http://html.adobe.com/edge/webfonts/