Retour

Effet de flash sur le texte

Qu'est-ce qu'un effet de flash sur le texte ?

Il s'agit d'un effet désagréable de scintillement provoqué par l'apparition d'un texte suite au chargement d'une police web ou d'un remplacement de police d'écriture sur un texte déjà mis en forme par le navigateur.

Pourquoi est-il important d'éviter cet effet ?

Cet effet nuit à l'expérience utilisateur lors de sa navigation sur la page, de même dans certains cas, la mise en page change, ce qui peut être pénalisé par Google.

Comment l'éviter ?

Afin d'éviter que cet effet se produise sur les polices d'écritures dont l'affichage est défini comme "optional" dans le style CSS (font-display: optional), il est nécessaire de précharger celles-ci grâce à une instruction <link rel="preload" ... />, à placer dans la section <head> du code HTML.

Exemple de préchargement d'une police web :

<head> 
    <style>
        @font-face {
            font-family: "Roboto";
            font-display: "optional";
            src: local("Roboto"), 
            url(https://...roboto.woff2) format("woff2");
        }    
    </style>
...
    <link rel="preload" href="https://...roboto.woff2" as="font" /> 
... 
</head>