web-dev-qa-db-fra.com

Comment faire en sorte que Google Fonts fonctionne dans IE?

Je développe actuellement un site utilisant l’API Google Fonts API . C’est génial et a été censément testé dans IE, mais lors du test dans IE 8, les polices ne sont tout simplement pas stylées.

J'ai inclus la police, comme Google indique à , 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 en 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?

cssinternet-explorerwebfontsgoogle-webfonts
66
Isaac Lubow

La méthode, comme indiqué par leurs considérations techniques page, est correcte - vous ne faites donc rien de mal. Cependant, ce rapport de bogue sur Google Code indique un problème avec les polices que Google a créées à cet effet, en particulier la version IE. Cela semble n’affecter que certaines polices, mais c’est un véritable casse-tête. 

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

N.B. Depuis octobre 2010, le problème est signalé comme étant résolu et fermé dans le rapport de bogue de Google Code. 

53
Yi Jiang

On dirait que IE8-IE7 ne peut pas comprendre plusieurs styles de police Web Google via la demande de fichier same à l'aide des balises linkhref. 

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

La seule façon pour moi de le faire fonctionner dans IE7-IE8 est de n'avoir qu'une seule requête Google Web Font. Et n’avez qu’un seul style de police dans la variable href de la balise link:

Donc normalement, vous auriez ceci, 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, ajoutez un IE conditionnel et spécifiez chaque style de police Google séparément et cela 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]-->

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

66
Jonathan Marzullo

Google Fonts utilise le format WOFF (Web Open Font Format), ce qui est bien, car il s'agit du format de police recommandé par le W3C.

Les versions d'IE antérieures à IE9 ne prennent pas en charge le format WOFF (Web Open Font Format) car il n'existait pas à l'époque. Pour prendre en charge <IE9, vous devez servir votre police dans Embedded Open Type (EOT). Pour ce faire, vous devrez écrire votre propre balise CSS @ font-face au lieu d'utiliser le script intégré de Google. Aussi, vous devez convertir le fichier WOFF original en EOT.

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 cela fonctionne dans <IE9. Cependant, les navigateurs modernes ne supportent plus EOT, vos polices ne fonctionneront donc plus dans les navigateurs modernes. Donc, vous devez spécifier les deux. La propriété src le supporte en séparant par une virgule les URL de la police et en spécifiant le type:

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

Cependant, <IE9 ne comprend pas cela, il ne fait que saisir le texte entre le premier guillemet et le dernier guillemet.

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 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 que <IE9 ne comprendra pas. Parce que <IE9 ne le comprendra pas, il ignorera la balise et l’EOT fonctionnera toujours. Les navigateurs modernes utiliseront la dernière police spécifiée prise en charge, donc probablement WOFF.

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

Donc, c'est uniquement parce que dans la deuxième propriété src que vous spécifiez format('woff'), <IE9 ne la comprendra pas (ou en fait, il ne trouvera pas la police dans l'url myfont.woff') format('woff) et continuera d'utiliser la première spécifiée (eot).

Alors maintenant, vos Google Webfonts fonctionnent pour <IE9 et les navigateurs modernes!

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

15
gitaarik

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 solution ici. Nous servons un fichier jQuery local quand il n'est pas chargé correctement à partir du CDN, n'est-ce pas?

<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 ferions-nous pas de même 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='/css/fonts.css' rel='stylesheet' type='text/css'><![endif]-->

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

  1. Téléchargez le dossier Zip de la police depuis Google et utilisez La police @ Font-face Generator de la police Squirrel pour créer la police Web locale.

  2. Créez un fichier fonts.css qui appelle les fichiers de polices nouvellement créés et hébergés localement (en liant uniquement le fichier si <IE9, comme indiqué ci-dessus). REMARQUE: le générateur @ font-face 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 les classes conditionnelles dans votre feuille de style principale pour éviter les poids et styles artificiels , vos styles de police pourraient 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 nous attendons-nous pas à cela de la part d'IE? En outre, il devient une seconde nature après un certain temps.

7
Matt

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

La solution pour moi était le résultat des instructions de la page Considérations techniques où elle apparaît en surbrillance ...

Pour un meilleur affichage dans IE, définissez la balise 'link' de la feuille de style en premier élément dans la section HTML 'head'.

Fonctionne sur IE7/8/9 pour moi maintenant.

4
Adam

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 tout s'est parfaitement déroulé.

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

2
PhotoAlbert

Il s’agit d’essayer toutes ces réponses, pour moi, rien ne fonctionne sauf la solution suivante: Police suggérée par Google 

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

Mais j'utilise ici des polices de langue étrangère, et cela ne fonctionnait pas uniquement sur IE11. J'ai découvert cette solution qui a fonctionné:

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

J'espère que sauver un temps précieux

1
amitgur

Vous pouvez essayer les polices fontsforweb.com où les polices fonctionnent pour tous les navigateurs, car elles sont fournies aux formats TTF, WOFF et EOT avec du 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 un fichier CSS en pièce jointe

puis ajoutez simplement la classe à n’importe quel é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>

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

1
Pawel

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

Plus d'informations dans cette page: http://html.Adobe.com/Edge/webfonts/

0
Thyago Quintas

Essayez ce type de lien, il fonctionnera aussi IE. 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'>
0
sam