Visibilité du texte

C’est quoi la visibilité du texte ?

La visibilité du texte correspond au fait que le texte d’une page web soit visible pendant le chargement de la police d’écriture. La police d'écriture est la représentation visuelle des caractères et est présente par défaut sur les systèmes d'exploitation. Il est possible de charger une police d'écriture spécifique (police WEB) afin de mettre en forme le texte d'une manière originale. 

Pourquoi est- il important que le texte soit visible pendant le chargement ?

Lorsqu'une police web est en cours de chargement, le texte sans police alternative du système n'est pas visible jusqu'au chargement du navigateur et pendant ce temps, l'utilisateur ne voit rien. Ce qui peut engendrer une mauvaise expérience utilisateuret provoquer des changements de mises en page inattendus.

Comment solutionner  le problème d'absence de texte ? 

Afin de solutionner ce problème d'absence de texte durant le chargement, il est nécessaire d'utiliser une police d'écriture présente sur les systèmes d'exploitation, afin que le texte soit visible durant le chargement. 

La définition d'une police WEB se fait au niveau du style CSS et se déclare de la manière suivante (sans instruction d'utilisation d'une police système alternative) :

@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');
}

La solution la plus simple pour utiliser une police système temporaire pendant le chargement de celle-ci est d'ajouter la propriété "font-display: swap;" :

@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;
}

L'instruction "swap" indique au navigateur que le texte utilisant la police doit être affiché immédiatement en utilisant une police système.