Back

Flash effect on text

What is a flash effect on text ?

It is an unpleasant twinkle effect caused by the appearance of a text after loading a web font or font replacement on a text already formatted by the browser.

Why is it important to avoid this effect ?

This effect harms the user experience when browsing the page, and in some cases the layout changes, which can be penalized by Google.

How to avoid it

In order to avoid this effect on fonts whose display is defined as "optional" in the CSS style (font-display: optional), it is necessary to preload them with a <link rel="preload" instruction ... />, to be placed in the <head> section of the HTML code.

Example of preloading a web font :

<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>