Assurez-vous que le texte reste visible pendant le chargement des polices Web

Lorsque vous utilisez une webfont, comme Google Fonts ou Font Awesome, ces polices ne résident pas sur l'ordinateur de votre visiteur - elles doivent être téléchargées depuis Internet et cela prend du temps.

Pendant la seconde où il faudra télécharger la police, le texte utilisé par cette police ne sera pas visible. C'est ce que Google veut que vous corrigiez. Pour ce faire, il faut spécifier une police de secours qui s'affichera jusqu'à ce que la police soit prête.

En utilisant la déclaration CSS font-display:swap, cela indique au navigateur d'afficher le texte immédiatement avec une police de secours, puis de la remplacer par la police demandée dès son chargement.

De cette façon, vos visiteurs pourront voir le contenu immédiatement, ce qui améliorera l'expérience de l'utilisateur et le temps de chargement perçu.

Plus d'information : https://web.dev/font-display/

Comment WP Rocket peut vous aider

Google Fonts

WP Rocket optimise automatiquement les Google Fonts.

Other fonts

Pour les autres polices web référencées dans les fichiers CSS, activez Minifier et combiner le CSS, et WP Rocket appliquera automatiquement le font-display: swap; pour résoudre cette recommandation.
Lorsque Optimiser le chargement du CSS est activé, font-display: swap; est ajouté aux polices dans le CSS du Critical Path CSS.
Lorsque Supprimer les CSS inutilisés est activé, le font-display : swap; Le descripteur est appliqué aux polices trouvées dans le fichier CSS utilisé résultant.

Ces options sont activées mais j'ai toujours cette recommandation

Cela est généralement dû au fait que les polices sont chargées sur votre site d'une manière que WP Rocket ne peut pas les traiter :

Dans une feuille de style tierce chargée à l'aide de @import
Chargement via JavaScript plutôt que via une feuille de style
Dans une feuille de style qui est déjà minifiée et donc non traitée par WP Rocket. L'activation du l’option Combiner le CSS devrait résoudre ce problème.
L’option Optimiser le chargement du CSS est active et la police se trouve dans le chemin critique CSS. Dans ce cas, font-display:swap ne sera pas ajouté. Activez l'option Minifier le CSS pour résoudre ce problème.

Je vois un flash de texte non stylisé

Cela peut se produire lorsque la fonction font-display:swap est utilisée. Pour plus d'informations, veuillez consulter cet article.