Éviter le texte invisible lors du chargement des polices

Katie Hempenius

Barry Pollard

En quoi cela vous concerne-t-il ?

Les polices sont souvent des fichiers volumineux dont le chargement prend du temps. Pour résoudre ce problème, certains navigateurs masquent le texte jusqu'à ce que la police se charge (le "flash du texte invisible").

La fonctionnalité Largest Contentful Paint (LCP) peut être retardée lors de l'affichage du texte. Si vous optimisez les performances, évitez le "Flash du texte invisible" (FOIT) et diffusez immédiatement le contenu auprès des utilisateurs à l'aide d'une police système, ce qui crée un "flash de texte sans style" (FOUT).

Paramètres par défaut du navigateur pour l'affichage des polices

Voici les comportements de chargement de police par défaut dans les navigateurs courants:

Afficher le texte immédiatement

Ce guide décrit deux méthodes pour afficher du texte dès que possible. La première est simple et bien compatible avec les navigateurs. La deuxième approche est approfondie, mais elle peut vous offrir d'autres options. Le meilleur choix pour votre site Web dépend de vos besoins.

Option 1: Utiliser font-display

font-display est une API permettant de spécifier une stratégie d'affichage des polices. swap indique au navigateur que le texte utilisant cette police doit être affiché immédiatement avec une police système. Une fois la police personnalisée prête, la police système est remplacée.

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

Si un navigateur n'est pas compatible avec font-display, contrairement à tous les navigateurs récents, il continue de suivre son comportement par défaut pour charger les polices.

Option 2: Attendre le chargement des polices personnalisées avant d'utiliser les polices personnalisées

Avec un peu plus de travail, vous pouvez envisager une approche plus personnalisée.

Cette approche comporte trois volets:

• N'utilisez pas de police personnalisée lors du chargement initial de la page en refactorisant votre CSS pour qu'elle n'utilise pas de polices personnalisées au départ. Cela permet au navigateur d'afficher immédiatement le texte à l'aide d'une police système.
• Détecter le moment où votre police personnalisée est chargée à l'aide de l'API CSS Font Loading
• Modifiez le style de la page pour utiliser la police personnalisée.

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

Vous pouvez également utiliser la bibliothèque FontFaceObserver, dont l'API est plus facile à utiliser pour certains.

Cela tient compte d'un certain nombre d'éléments supplémentaires à prendre en compte lors du chargement des polices. Par exemple, toutes les polices peuvent être chargées en même temps, évitant ainsi plusieurs mises en page à chaque chargement. Les sites peuvent également choisir de ne pas charger les polices pour les utilisateurs dont la connexion est lente ou pour ceux qui utilisent l'option Enregistrer les données.

Valider

Exécutez Lighthouse pour vérifier que le site utilise font-display: swap pour afficher le texte:

1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
2. Cliquez sur l'onglet Lighthouse.
3. Assurez-vous que la case Performances est cochée dans la liste Catégories.
4. Cliquez sur le bouton Générer un rapport.

Vérifiez que l'audit Assurez-vous que le texte reste visible pendant le chargement des polices Web réussit.