Attendre le chargement des polices avant d'afficher la page web

Question

J'utilise @font-face pour intégrer des polices dans mon site web. Le texte s'affiche d'abord avec la police par défaut du système, puis (une fois que le fichier de police a été chargé) la bonne police s'affiche une fraction de seconde plus tard. Existe-t-il un moyen de minimiser ce délai ou de s'en débarrasser, en retardant le rendu de la page jusqu'à ce que les polices aient été chargées, ou quelque chose de similaire ?

Answer 1

Comme personne ne l'a mentionné, je pense que cette question doit être mise à jour. J'ai réussi à résoudre le problème en utilisant l'option "preload" supportée par les navigateurs modernes.

Au cas où quelqu'un n'aurait pas besoin de prendre en charge les anciens navigateurs.

<link rel="preload" href="assets/fonts/xxx.woff" as="font" type="font/woff" crossorigin>

quelques liens utiles avec plus de détails :

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content http://www.bramstein.com/writing/preload-hints-for-web-fonts.html

Answer 2

Editer : La meilleure approche consiste probablement à encodage base64 de vos polices . Cela signifie que votre police devra être entièrement chargée au moment où votre code HTML sera analysé et affiché. Vous pouvez le faire avec le générateur de polices web de Font Squirrel https://www.fontsquirrel.com/tools/webfont-generator en cliquant sur "Expert" puis sur "base64 encode". C'est ainsi que fonctionnent des services comme TypeKit.

---

Réponse originale : Une autre façon de détecter si les polices sont chargées serait d'utiliser FontLoader https://github.com/smnh/FontLoader ou en copiant leur stratégie.

Ils se lient à l'événement de défilement dans le navigateur, car lorsque la police se charge, le texte est redimensionné. Il utilise deux divs contenantes (qui défileront lorsque la hauteur changera) et un fallback séparé pour IE.

Une alternative consiste à vérifier périodiquement le DOM avec setInterval mais l'utilisation d'événements javascript est bien plus rapide et supérieure.

Évidemment, vous pouvez régler l'opacité du corps sur 0 et l'afficher une fois que la police est chargée.

Answer 3

Cela dépend du comportement du navigateur.

Tout d'abord, où est déclaré @font ? Est-elle en ligne avec votre HTML, déclarée dans une feuille CSS sur la page, ou (avec un peu de chance) déclarée dans une feuille CSS externe ?

S'il n'est pas dans une feuille externe, essayez de le déplacer dans une feuille externe (c'est de toute façon une meilleure pratique).

Si cela ne suffit pas, vous devez vous demander si la différence d'une fraction de seconde est vraiment préjudiciable à l'expérience de l'utilisateur. Si c'est le cas, considérez alors JavaScript, il y a quelques choses que vous pouvez faire, des redirections, des pauses, etc. pire que le problème initial. Pire pour les utilisateurs et pire pour la maintenance.

Ce lien peut vous aider :

http://paulirish.com/2009/fighting-the-font-face-fout/

Answer 4

Joni Korpi a rédigé un article intéressant sur le chargement des polices avant le reste de la page.

http://jonikorpi.com/a-smoother-page-load/

Il utilise également un fichier loading.gif pour réduire le délai afin que les utilisateurs ne soient pas frustrés.

Answer 5

Ce code fonctionne très bien pour moi. Il utilise l'élément API de chargement des polices qui bénéficie d'une bonne prise en charge par les navigateurs modernes.

<style>
  @font-face {
    font-family: 'DemoFont';
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/DemoFont.eot");
    src: url("./fonts/DemoFont.woff2") format("woff2"),
    url("./fonts/DemoFont.woff") format("woff"),
    url("./fonts/DemoFont.ttf") format("truetype");
  }

  .font {
    font-family: 'DemoFont';
    color: transparent;
  }

  html.font-loaded .font {
    color: inherit; // Override `transparent` from .font
  }

</style>
<script>
  // Check if API exists
  if (document && document.fonts) {    
    // Do not block page loading
    setTimeout(function () {           
      document.fonts.load('16px "DemoFont"').then(() => {
        // Make font using elements visible
        document.documentElement.classList.add('font-loaded') 
      })
    }, 0)
  } else {
    // Fallback if API does not exist 
    document.documentElement.classList.add('font-loaded') 
  }
</script>

L'astuce consiste à définir la couleur CSS comme transparente pour les éléments utilisant la police. Une fois chargée, cette couleur est réinitialisée en ajoutant font-loaded à la classe <html> élément.

Veuillez remplacer DemoFont avec quelque chose de significatif pour votre projet afin de le faire fonctionner.