Comment faire fonctionner Google Fonts dans IE?

J’ai développé un site qui utilise l’ API Google Fonts . C’est génial, et soi-disant a été testé dans IE, mais lors du test dans IE 8, les fonts ne sont tout simplement pas stylées.

J’ai inclus la police, comme l’ indique Google, donc:

 

et ajouté son nom à l’avant d’une famille de fonts en CSS donc:

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

Fonctionne comme un charme dans Chrome, Firefox, Safari. Pas de dés dans IE 8. Quelqu’un sait pourquoi?

La méthode, indiquée par leur page de considérations techniques , est correcte – donc vous ne faites absolument rien de mal. Cependant, ce rapport de bogue sur Google Code indique qu’il ya un problème avec les fonts produites par Google, en particulier la version IE. Cela ne semble affecter que certaines fonts, mais c’est un véritable casse-tête.

Les réponses sur le fil indiquent que le problème réside dans les fichiers que Google met à disposition, vous ne pouvez donc rien y faire. L’auteur suggère d’obtenir les fonts à partir d’autres emplacements, tels que FontSquirrel , et de les servir localement à la place, auquel cas vous pourriez également être intéressé par des sites tels que League of Movable Type .

NB À partir d’octobre 2010, le problème est signalé comme étant résolu et fermé sur le rapport de bogue de Google Code.

On dirait que IE8-IE7 ne peut pas comprendre plusieurs styles de fonts Google Web via la même requête de fichier en utilisant les balises de link href .

Ces deux liens m’ont aidé à comprendre cela:

  • Voir ce numéro ouvert de Google et regardez les commentaires.
  • Voir aussi cette réponse StackOverlow Google Les fonts Web de Google ne fonctionnent pas dans IE8

La seule façon dont je l’ai eu pour fonctionner dans IE7-IE8 est de n’avoir qu’une seule requête Google Web Font. Et seulement un style de police dans le href de la balise de link :

Donc, normalement, vous auriez cela, en déclarant plusieurs styles de police dans la même requête:

  

Mais dans IE7-IE8, ajoutez un IE conditionnel et spécifiez chaque style de police Google séparément et cela fonctionnera:

  

J’espère que cela peut aider les autres!

Google Fonts utilise le format de police Web Open Font Format (WOFF), ce qui est bien, car c’est le format de police recommandé par le W3C.

Les versions d’IE antérieures à IE9 ne prennent pas en charge Web Open Font Format (WOFF) car il n’existait pas à l’époque. Pour prendre en charge

Vous pouvez convertir votre WOFF en EOT ici en le convertissant d’abord en TTF puis en EOT: http://convertfonts.com/

Ensuite, vous pouvez servir la police EOT comme ceci:

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

Maintenant, ça marche dans

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

Cependant,

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

comme l’URL de la police. Nous pouvons résoudre ce problème en spécifiant d’abord une src avec une seule URL, qui est le format EOT, puis en spécifiant une deuxième propriété src destinée aux navigateurs modernes et

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

Donc seulement parce que dans la deuxième propriété src vous spécifiez le format('woff') , myfont.woff’) format(‘woff ) et continuera à utiliser le premier spécifié (eot).

Alors, maintenant, vos Webfonts Google fonctionnent pour

Pour plus d’informations sur les différents types de fonts et la prise en charge du navigateur, lisez cet article parfait d’Alex Tatiyants: http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

Bien que la solution de Yi Jiang puisse fonctionner, je ne pense pas que l’abandon de l’API Google Web Font soit la bonne réponse ici. Nous servons un fichier jQuery local lorsqu’il n’est pas correctement chargé depuis le CDN, non?

   

Alors, pourquoi ne pas faire la même chose pour les fonts, en particulier pour

   

Voici mon processus lors de l'utilisation de fonts personnalisées:

  1. Téléchargez le dossier ZIP de la police depuis Google et utilisez le générateur de fonts @ font-face de Font Squirrel pour créer la police Web locale.
  2. Créez un fichier fonts.css qui appelle les fichiers de fonts nouvellement créés, hébergés localement (uniquement liés au fichier si

     @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. En utilisant les classes conditionnelles d'IE dans votre feuille de style principale pour éviter les poids et les styles faux , vos styles de police peuvent ressembler à ceci:

     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, } 

Bien sûr, c'est un peu de travail supplémentaire, mais ne sums-nous pas venus à attendre cela de IE? En outre, il devient une seconde nature après un certain temps.

Pour ce que cela vaut, je ne pouvais pas le faire fonctionner sur IE7 / 8/9 et l’option de déclaration multiple ne faisait aucune différence.

Le correctif pour moi était le résultat des instructions sur la page des considérations techniques où il met en évidence …

Pour un meilleur affichage dans IE, faites en sorte que la feuille de style ‘link’ marque le premier élément de la section HTML ‘head’.

Fonctionne avec IE7 / 8/9 pour moi maintenant.

J’ai essayé toutes les options ci-dessus et elles n’ont pas fonctionné. Ensuite, j’ai localisé la police Google (Over the Rainbow) dans mon dossier (nouveau) et utilisé IE conditionnel ci-dessous et cela a fonctionné parfaitement.

  

J’espère que cela aidera

Vous pouvez essayer fontsforweb.com où les fonts fonctionnent pour tous les navigateurs, car elles sont fournies aux formats TTF, WOFF et EOT avec le code CSS prêt à être collé sur votre page, c.-à-d.

 @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"; } 

ou vous pouvez les télécharger zippées dans un paquet avec fichier CSS joint

puis ajoutez simplement la classe à n’importe quel élément pour appliquer cette police, c.-à-d.

 

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

Voir le travail: http://jsfiddle.net/SD4MP/

Tout est question d’essayer toutes ces réponses, pour moi, rien ne fonctionne, sauf la solution suivante: police de caractères Google suggérée

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

Mais, j’utilise ici des fonts de langues étrangères, et cela ne fonctionnait pas uniquement sur IE11. J’ai découvert cette solution qui fonctionnait:

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

Espérons que sauver quelqu’un un temps précieux

Essayez ce type de lien, il fonctionnera également dans IE. J’espère que cela t’aides .

  

J’ai eu le même problème avec toi. J’ai trouvé une solution utilisant un code Adobe Web Fonts, qui fonctionne parfaitement dans Internet Explorer, Chrome, Firefox et Safari.

Plus d’infos sur cette page: http://html.adobe.com/edge/webfonts/