Text visibility

What is text visibility ?

Text visibility corresponds to the fact that the text of a web page is visible while the font is loading. The font is the visual representation of characters and is present by default on operating systems. It is possible to load a specific font (WEB font) in order to format the text in an original way. 

Why is it important that the text is visible during the page loading ?

When a web font is being loaded, text without the system's alternative font is not visible until the browser loads and during this time the user sees nothing. This can lead to a bad user experience and cause unexpected layout changes.

How do I solve the absence of text ?

In order to solve the problem of the absence of text during loading, it is necessary to use a font present on the operating systems, so that the text is visible during loading. 

The definition of a WEB font is done at the level of the CSS style and is declared in the following way (without instruction to use an alternative system font) :

@font-face {
  font-family: 'Pacifico';
  src: local('Pacifico Regular'), local('Pacifico-Regular'), 
       url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
}

The easiest way to use a temporary system font while it is loading is to add the "font-display: swap;" property :

@font-face {
    font-family: 'Pacifico'; 
    src: local('Pacifico Regular'), local('Pacifico-Regular'),
        url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2'); 
    
    font-display: swap;
}

The "swap" instruction tells the browser that the text using the font should be displayed immediately using a system font.