web-dev-qa-db-fra.com

Les polices de Google ne sont pas rendues sur Google Chrome

Je construis un nouveau thème WordPress (je ne sais pas si c'est pertinent) et il y a ce problème qui ne cesse de m'embrouiller.

J'ai chargé Roboto Slab depuis Google Webfonts (inclus le CSS dans la section <head>). Sur tous les autres navigateurs, la police est rendue correctement, sauf Google Chrome. Lorsque je charge le site Web pour la première fois dans Google Chrome, les textes utilisant cette police personnalisée NE SONT PAS affichés AT TOUS (même si la pile de polices a Georgia comme solution de secours - "Roboto Slab", Georgia, serif;). Après avoir survolé le lien stylé ou relancé une propriété CSS dans Inspector, les textes deviennent visibles.

Depuis que j'ai commencé le thème il y a quelque temps, je me souviens très bien qu'il fonctionnait parfaitement auparavant. Est-ce un bogue récent connu de la mise à jour de Chrome? 

Premier chargement: une capture d'écran # 1

Après avoir réappliqué l'une des propriétés CSS, passez en vue responsive ou survolez un élément: une capture d'écran n ° 2

Quelqu'un a des problèmes similaires? Comment dois-je procéder avec cela?

Merci!

htmlcssgoogle-chromegoogle-webfonts
63
enodekciw

Apparemment, c'est un bug connu de Chrome . Il existe une solution de contournement CSS uniquement qui devrait résoudre le problème: 

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

Il semble que Chrome a simplement besoin de dire de repeindre le texte.

88
Meg

Le correctif CSS n'a pas fonctionné pour moi, le script de délai de 0,5 seconde semble gênant.

Cet extrait JS semble fonctionner pour nous:

<script type="text/javascript">
jQuery(function($) {
    if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
        $('body').css('opacity', '1.0') 
    }
})
</script>
9
kjetilh

Si le correctif css ne fonctionne pas pour vous

Dans le cas où le premier poste évalué ne fonctionne pas, voici une solution:

supprime le 'http:' dans:

<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>

ou

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);

Comme expliqué par David Bain , la plupart des navigateurs modernes n'exigent pas que vous spécifiiez le protocole, ils "déduiront" le protocole en fonction du contexte d'où vous l'avez appelé

8
JohnAndrews

Essayé le correctif css seul ci-dessus sans succès. Enfin résolu en créant une feuille de style (chrome.css) contenant:

body {
 -webkit-animation-delay: 0.1s;
 -webkit-animation-name: fontfix;
 -webkit-animation-duration: 0.1s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: linear;
}

@@-webkit-keyframes fontfix {
 from { opacity: 1; }
 to   { opacity: 1; }
}

Et en le chargeant avec jQuery au bas de la page:

<script type="text/javascript">
   $(document).ready(function () {
      $('head').append('<link href="/chrome.css" rel="stylesheet" />');
   });
</script>
6
Andrew

J'ai incorporé le CSS ci-dessus ... mais j'inclus ÉGALEMENT le javascript suivant dans mon en-tête:

(Remarque, je sais que je n'ai pas personnalisé les polices dans le code ci-dessous. Mais peu importe, cela semble toujours aider à obliger Chrome à repeindre les polices de la page ... assurez-vous simplement que vos polices sont correctement référencées ailleurs)

Avec le code CSS mentionné ci-dessus, utilisé conjointement avec le code ci-dessous inclus dans my ... au pire, toutes les polices de ma page s'afficheront après une seconde ou deux de retard.

J'espère que cela aide les gens. À votre santé.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">

 $(function() { $('body').hide().show(); });
</script>


<script type="text/javascript">

//JavaScript goes here


WebFontConfig = {
  google: { families: ['FontOne', 'FontTwo'] },
    fontinactive: function (fontFamily, fontDescription) {
   //Something went wrong! Let's load our local fonts.
    WebFontConfig = {
      custom: { families: ['FontOne', 'FontTwo'],
      urls: ['font-one.css', 'font-two.css']
    }
  };
  loadFonts();
  }
};

function loadFonts() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
}

(function () {
  //Once document is ready, load the fonts.
  loadFonts();
  })();

</script>

Voici où j'ai trouvé ce qui précède: https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso

2
Nate

Je viens de faire face au même problème. C’était dû à l’incompatibilité de protocole HTTP/S décrite ici

Utilisez la version https de l'URL.

1
Emad Ehsan

Je l’ai corrigé avec la solution JS, mais je devais aussi utiliser la dernière version de jquery (1.11) hébergé sur Google pour le réparer.

1
Conor O Kelly

Voir problème similaire en question Problème étrange lors du rendu des polices dans Google .

La solution est de charger la police désirée (dans mon cas, «Fira Sans») à partir du CDN de Mozilla au lieu de Google CDN.

1
Sebastiaan Ordelman

Si quelqu'un est toujours aux prises avec ce problème (2019), il semble y avoir un bogue dans le script du générateur CSS de Google Fonts.

J'ai chargé mes polices avec la balise suivante:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300">

Chaque @font-face dans le fichier contenait une ligne comme celle-ci:

src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');

Comme vous pouvez le constater, la local('sans-serif') est placée avant l'URL distante, ce qui est faux. Ainsi, Chrome charge la police sans-serif par défaut à la place de la police demandée.

Une solution simple consiste à réorganiser la partie font-weight de l'URL, de Roboto:400,300 à Roboto:300,400. Cela fait que le générateur n'inclut pas la source local('sans-serif').

J'espère que ça aide quelqu'un.

0
RedClover

Ce n'est pas une solution réelle mais cela fonctionne mieux pour moi que tout le reste dans ce fil. J'ai changé la police. J'avais Fira Sans et maintenant je viens de changer en Roboto , qui fonctionne immédiatement 

0
b1nary

je viens d'utiliser pour supprimer la police roboto de mes polices Windows et tout fonctionne en ce moment.

c'est peut-être parce que vous avez une version plus ancienne de la police sur votre système. je suppose .

0
jimuty

J'essayais de travailler avec la réponse de Meg, mais comme beaucoup d'autres, cela ne fonctionnait pas pour moi non plus.

Pour utiliser Google Font, trouvé cette astuce [Ajout de captures d'écran pour les étapes].

1) Il suffit de prendre l’URL du lien css ou standard comme indiqué.

2) Ouvrez le lien dans un autre onglet, copiez le code css complet (c'est-à-dire font-face) dans votre fichier css et exécutez-le.

Pas sûr de la performance car de nombreux appels http sont ajoutés, ou essayez simplement de copier une police de caractères.

Image pour l'étape 1  enter image description here

Image pour l'étape 2  enter image description here

0
Akshay

Il est possible que l'élément ait défini text-rendering: optimizeLegibility qui peut être à l'origine de ce problème ou de problèmes similaires. Le changer en auto a résolu ce problème pour moi avec un projet Foundation 5 qui le définit sur optimizeLegibility par défaut.

0
MarcGuay