Comment faire fonctionner Google Fonts dans IE?

https://stackoverflow.com/questions/3694060

02-10-2019
|

Question

J'ai développé un site qui utilise le API Google Fonts . Il est grand et a supposément été testé dans IE, mais lors du test dans IE 8 les polices ont tout simplement pas de style.

J'inclus la police, comme Google Ordonne , ainsi:

<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 polices CSS ainsi:

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 solution

La méthode, comme indiqué par la page de leur considérations techniques, est correct - donc vous faites certainement pas mal de quoi que ce soit. Cependant, ce rapport de bogue sur Google Code indiquent qu'il ya un problème avec les polices Google produites pour cela, en particulier la version IE. Cela ne semble affecter que certaines polices, mais il est un vrai bummmer.

Les réponses sur le fil indiquent que le problème réside dans les fichiers Google au service, donc il n'y a rien que vous pouvez faire à ce sujet. L'auteur suggère obtenir les polices à partir d'emplacements alternatifs, comme FontSquirrel , et servir localement, et dans ce cas, vous pourriez aussi être intéressé par des sites comme la Ligue des Movable type .

N.B.. A partir de 2010, la question oct est rapporté comme fixe et fermé sur le rapport de bogue Google Code.

Autres conseils

On dirait IE8-IE7 ne peut pas comprendre plusieurs styles Google Web Font par la même Demande de fichier en utilisant les balises link href.

Ces deux liens me ont aidé à comprendre cela:

Voir cette problème Google ouvert , et regardez les commentaires.
Voir aussi ce StackOverlow réponse Google Web Fonts ne fonctionnent pas dans IE8

La seule façon que je l'ai eu à travailler dans IE7-IE8 est d'avoir une seule demande Google Web Font. Et seulement avoir un style de police dans le href de la balise link:

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

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

Mais dans IE7-IE8 ajouter un style conditionnel IE et spécifiez chaque police Google séparément et il fonctionnera:

<!--[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]-->

Espérons que cela peut aider les autres!

Google Fonts utilise Open Web Format Police (WOFF), ce qui est bon, parce qu'il est le format de police de caractères recommandée par le W3C.

IE versions plus anciennes que IE9 ne prennent pas en charge le format Open Web Police (WOFF) parce qu'il n'existait pas à l'époque. Pour le soutien

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

Ensuite, vous pouvez servir la police EOT comme ceci:

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

Maintenant, cela fonctionne dans

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

Cependant,

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

l'URL à la police. Nous pouvons résoudre ce problème en spécifiant tout d'abord un src avec une seule URL qui est le format EOT, en spécifiant puis une deuxième propriété src qui est conçu pour les navigateurs modernes et

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

Alors seulement parce que dans la deuxième propriété src vous spécifiez le format('woff'), myfont.woff') format('woff url) et continuer à utiliser la première spécifiée un (EOT) .

Alors maintenant, vous avez obtenu votre travail Google pour WebFonts

Pour plus d'informations sur différents types de police et le soutien du navigateur, lisez cet article parfait par Alex Tatiyants: http://tatiyants.com/ how-to-get-IE8-à-support-html5-tags-and-web fonts /

Alors que la solution de Yi Jiang peut travailler, je ne crois pas abandonner Google Web Font API est la bonne réponse ici. Nous servons un fichier jQuery local quand il est pas correctement chargé à partir du CDN, droit?

<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

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

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

Télécharger le dossier ZIP de la police de Google, et utiliser polices écureuil de @ Font-face générateur pour créer la police Web local.

Créez un fichier fonts.css qui appelle les nouvellement créés, les fichiers de polices hébergées localement (uniquement un lien vers le 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;
}

En utilisant IE les classes conditionnelles dans votre feuille de style principale à avoide faux poids et des 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, il est un peu plus de travail, mais nous n'ont pas droit d'attendre de ce IE? En outre, il devient une seconde nature après un certain temps.

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

Le correctif a été pour moi à la suite des instructions sur le Considérations techniques Page où il met en avant ...

Pour un affichage optimal dans IE, faire la balise stylesheet « link » la première élément dans la partie 'tête' HTML.

Travaux sur IE7 / 8/9 pour moi.

J'ai essayé toutes les options ci-dessus et de ne pas avoir travaillé. Ensuite, je trouve la police Google (Over the Rainbow) dans mon dossier (nouveau) et utilisé IE conditionnel ci-dessous et cela a fonctionné parfaitement.

<!--[if IE]>
<style type="text/css">
    @font-face {
    font-family: "Over the Rainbow";
    src: url("../new/over.ttf");
    src: local("Over the Rainbow"), url("../new/over.ttf");
    }
</style>
<![endif]-->

J'espère que cela aidera

Vous pouvez fontsforweb.com où les polices travaillent pour tous les navigateurs, car ils sont fournis dans TTF, WOFF et EOT formats avec code CSS prêt à être collé sur votre page i.e..

@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 compressés dans un paquet avec le fichier CSS joint

puis juste ajouter la classe à tout élément pour appliquer cette police i.e..

<h2 class="fontsforweb_fontid_5903">This will be written with Gotham Bold font and will work in all browsers</h2>

voir travailler: http://jsfiddle.net/SD4MP/

Il est tout à essayer toutes ces réponses, pour moi, rien ne fonctionne, sauf la solution suivante: Google police de caractères

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

Mais, je suis ici en utilisant des polices de langues étrangères, et il ne fonctionne pas sur IE11 seulement. J'ai trouvé cette solution qui a fonctionné:

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

L'espoir que de gagner du temps précieux quelqu'un

Essayez ce type de lien, il fonctionnera dans IE aussi. J'espère que cela t'aides .

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>

J'ai eu le même problème avec vous. J'ai trouvé une solution en utilisant un code Web Fonts Adobe, parfait de travail dans Internet Explorer, Chrome, Firefox et Safari.

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

Après mon enquête, je suis venu à cette solution:

//writing the below line into the top of my style.css file
@import url('https://fonts.googleapis.com/css?family=Assistant:200,300,400,600,700,800&subset=hebrew');

DOIT RESPECTER: Nous devons avoir besoin d'écrire correctement le font-weight de cette police. Par exemple: font-weight:900; ne fonctionnera pas que nous n'avons pas inclus 900 comme 200,300,400,600,700,800 dans l'adresse URL lors de l'importation de Google avec le lien ci-dessus. Nous pouvons ajouter ou inclure 900 à ce qui précède URL, mais cela travail que si ci-dessus Google Font a cette option tout en intégrant

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow