web-dev-qa-db-fra.com

Charger Google Font avec <link> de manière asynchrone ou différée sans Font Face Observer

Je souhaite utiliser la police Google "Noto Serif" pour mon site Web. Mon problème est que lorsque je le teste avec Google PageSpeed ​​Insights, il me dit que je suis parfait, sauf pour une chose:

<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">

Votre page contient 1 ressources CSS bloquantes. Cela entraîne un retard dans le rendu de votre page. Aucun contenu au-dessus de la ligne de flottaison de votre page n'a pu être affiché sans attendre le chargement des ressources suivantes. Essayez de différer ou de charger de manière asynchrone les ressources de blocage, ou insérez les parties critiques de ces ressources directement dans le code HTML.

Je connais une mauvaise solution pour cela. C'est pour lier la police en utilisant <script> en bas du fichier HTML. Le problème avec cette solution est qu'elle provoque un flash de texte sans style à chaque fois que vous cliquez sur quelque chose dans mon site Web.

J'utilise jekyll hébergé avec GitHub Pages, donc je ne pense pas pouvoir installer Font Face Observer :(

cssasynchronousfontsjekyllgoogle-font-api
24
Stuffed Marshmallow

Voilà, incluez ceci dans la balise body et non dans la balise head

<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" lazyload>
4
Paddy

Vous pouvez charger les polices Web de manière asynchrone avec ce script:

<script>
   WebFontConfig = {
      typekit: { id: 'xxxxxx' }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
   })(document);
</script>

Vous aurez besoin de cette bibliothèque , c'est assez facile à implémenter. J'ai appris cela d'un cours que j'ai suivi récemment, Fondamentaux de la conception de sites Web réactifs, si vous êtes intéressé, vous pouvez le vérifier ici .

23
Mirza Sisic

Ajouter uniquement une balise de bloc

 https://fonts.googleapis.com/css?family=Noto+Serif&display=block

Réf: Contrôle de la police

0
Brayan Cruz