Comment faire en sorte que Google Fonts fonctionne dans IE?

Question

J'ai mis au point un site qui utilise le Google Polices de l'API. C'est génial, et soi-disant a été testé sous IE, mais lors de l'essai de IE 8 les polices ne sont pas simplement de style.

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

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light"  
 rel="stylesheet" type="text/css" />

et a ajouté son nom à l'avant d'une famille de police 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?

Answer 1

Ressemble à IE8 et IE7 ne peut pas comprendre de multiples Polices Web de Google styles à travers la même demande de fichier à l'aide de l' link tags href.

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

• Voir ce ouvrir Google question, et regardez les commentaires.
• Voir aussi cette StackOverlow Réponse Polices Web de Google ne fonctionne pas dans IE8

Le seul moyen que j'ai eu à travailler dans IE7-IE8 est d'avoir seulement un Polices Web de Google demande. Et ont seulement un style de police dans l' href de la link balise:

Donc, normalement, vous auriez ce, déclaration de plusieurs styles de police dans la même demande:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" /> 

Mais dans IE7-IE8 ajouter un IE conditionnel et de spécifier à chaque Google style de police séparément et il va fonctionner:

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800" />
<![endif]-->

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

Answer 2

La méthode, comme indiqué par leurs considérations techniques page, est - il correct, alors vous êtes certainement pas faire quelque chose de mal. Cependant, ce rapport de bug sur Google Code indiquent qu'il y a un problème avec les polices de Google pour ce, plus précisément la version de IE. Cela ne semble affecter que certaines polices, mais c'est un vrai bummmer.

Les réponses sur le fil indiquent que le problème se trouve avec les fichiers de Google servir, donc il n'y a rien que vous pouvez faire à ce sujet. L'auteur suggère de se les polices à partir d'autres emplacements, comme FontSquirrel, et de le servir localement au lieu de cela, dans ce cas, vous pourriez également être intéressé par des sites comme la Ligue de Movable Type.

N. B. Comme de Oct 2010, le problème est signalé comme fixe et fermé sur le Google Code de rapport de bug.

Answer 3

Google utilise les Polices Web Open font Format (WOFF), ce qui est bon, parce que c'est le recommandé le format de la police par le W3C.

IE versions plus anciennes que IE9 ne prennent pas en charge Web Open font Format (WOFF) parce qu'il n'existait pas alors. À l'appui de < IE9, vous devez vous servir de votre police Intégré de Type Ouvert (EOT). Pour ce faire, vous devez écrire votre propre @font-face css de la balise au lieu d'utiliser de l'intégration de script de Google. Aussi vous avez besoin de convertir l'original WOFF fichier EOT.

Vous pouvez convertir votre WOFF à EOT ici en convertissant d'abord qu'il TTF et puis à la fin de la BANDE: http://convertfonts.com/

Ensuite, vous pouvez servir le EOT police comme ceci:

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

Maintenant, il travaille dans < IE9. Cependant, les navigateurs ne prennent pas en charge EOT plus, alors maintenant, vos polices ne fonctionnent pas dans les navigateurs modernes. Si vous avez besoin de les spécifier à la fois. La propriété src prend en charge ce par des virgules séparant la police url et specefying du type:

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

Cependant, < IE9 ne comprends pas, c'est juste graps le texte entre la première citation et la dernière citation, de sorte qu'il va effectivement obtenir:

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 un crs, avec une seule url, ce qui est la EOF format, puis specefying un deuxième src propriété qui est conçu pour les navigateurs modernes et < IE9 ne sera pas à comprendre. Parce que < IE9 ne le comprendront pas, il va ignorer la balise afin EOF fonctionnera toujours. Les navigateurs modernes utilisera la dernière de police spécifié qu'ils soutiennent, alors, probablement, woff.

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

Uniquement parce que dans le deuxième propriété src vous spécifiez l' format('woff'), < IE9 ne comprends pas (ou fait-il juste ne pouvez pas trouver la police à l'adresse url myfont.woff') format('woff) et continuera d'utiliser la première spécifiée (eot).

Donc, maintenant vous avez votre Google Webfonts de travail pour < IE9 et les navigateurs modernes!

Pour plus d'informations concernant les différents type de police et le navigateur prend en charge la lecture de cet article parfait par Alex Tatiyants: http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

Answer 4

Tandis que Yi Jiang solution peut fonctionner, je ne crois pas que l'abandon de l'Polices Web de Google API est la bonne réponse ici. Nous servons un local le fichier jQuery quand il n'est pas correctement chargé de la CAN, à droite?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.9.0.min.js"><\/script>')</script>

Alors pourquoi ne pas faire la même chose pour les polices, en particulier pour < IE9?

<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]><link href='http://stackoverflow.com/css/fonts.css' rel='stylesheet' type='text/css'><![endif]-->

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

1. Télécharger la police du dossier ZIP à partir de Google, et l'utilisation de la Police Écureuil @font-face Generator pour créer le site web local de la police.

2. Créer un fonts.css le fichier qui appelle le nouvellement créé, hébergé localement les fichiers de police (uniquement la liaison vers le fichier si < IE9, comme indiqué ci-dessus). REMARQUE: Le @font-face Generator crée ce fichier pour vous.

   @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 IE conditionnel classes dans votre feuille de style pour éviter de faux poids et de styles, vos styles de police pourrait 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 n'avons-nous pas venus à s'attendre à ce à partir d'IE? En outre, il devient une seconde nature après un certain temps.

Answer 5

Pour ce que sa vaut le coup, je ne pouvais pas le faire fonctionner sur IE7/8/9 et les multiples déclaration d'option n'a fait aucune différence.

Le correctif a été pour moi comme un résultat des instructions sur les Considérations Techniques de la Page où il met en évidence...

Pour un meilleur affichage dans IE, de faire la feuille de style 'link' étiquette de la première élément dans le code HTML de section "tête".

Fonctionne sur IE7/8/9 pour moi maintenant.