Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété font-display

Description de la propriété font-display.

font-display est une propriété assez technique, qui détermine quelle logique doit suivre la navigateur au moment de télécharger les polices personnalisées. En effet, les fichiers de polices peuvent être assez gros et prendre un temps de téléchargement non négligeable. Que faire pendant ce temps ? Ne pas afficher les textes ? Les afficher dans une autre police ?

En cas de police qui se fait attendre, les navigateurs procèdent généralement par trois étapes successives :

  • Étape 1 : les contenus devant s'afficher dans la police manquante ne sont pas affichés. L'espace qu'ils devraient occuper est néanmoins réservé, autrement dit on a des zones blanches sur la page.
    Cette étape est parfois appelée FOIT (Flash Of Invisible Text) et peut durer de 0 à quelques secondes suivant les navigateurs.
     
  • Étape 2 : les contenus sont affichés dans une police de remplacement. Les textes sont donc lisibles mais pas encore dans leur police définitive. Cette étape prend le nom de FOUT (Flash Of Unstyled Text).
     
  • Étape 3 : le temps de chargement de la police est vraiment trop long, le contenu reste définitivement affiché dans la police de substitution.
     

Bien entendu, et heureusement, la plupart du temps la police est téléchargée suffisamment rapidement, ou est déjà présente dans le cache. Dans ce cas, le contenu est affiché immédiatement dans la police choisie, sans qu'il soit nécessaire de passer par ces trois étapes.

font-display permet d'ajuster la durée de chacune des étapes, ou, suivant la valeur, de ne pas les traiter toutes.

Attention, la propriété font-display ne peut s'utiliser que dans la directive @type-face qui sert à télécharger la police de caractères personnalisée.

@type-face { font-family:'Nom de la police'; src: url('chemin/fichier.otf'); font-style: normal; font-display: swap; }

Syntaxes pour font-display.

  • font-display: auto;

    Le navigateur utilise son algorithme par défaut.

  • font-display: block;

    Le temps d'attente à blanc est de quelques secondes (étape 1 : FOIT). L'étape 2 (FOUT) n'est pas limitée dans le temps.

    Le texte demeure invisible pendant quelques secondes, puis est ensuite affiché dans une police de remplacement, jusqu'à ce que le police demandée soit disponible.

    block peut être utilisée lorsque le texte doit vraiment être affiché dans la police demandée, par exemple parce que des caractères spéciaux ont été utilisés, et qu'ils risquent de ne pas exister dans la police de remplacement.
    Cependant il faut garder à l'esprit que le texte sera invisible pendant plusieurs secondes : on réservera block pour des textes courts, et surtout pas pour la page entière.

  • font-display: swap;

    Le temps d'attente à blanc est nul ou très court (FOIT). L'étape 2 (FOUT) n'est pas limitée dans le temps.

    Le texte est immédiatement (ou presque) affiché dans une police de remplacement, sans temps d'attente à blanc. Lorsque la police est disponible, le texte est ré-affiché dans la police prévue. Cette valeur est la plus couramment employée.

    swap est intéressant pour les textes qui restent compréhensibles dans une police de remplacement mais que l'on préfère afficher dans la police demandée.
    On emploiera swap pour des textes courts car il faut garder à l'esprit que la page devra être composée deux fois : une première fois avec la police de remplacement et une deuxième fois avec la police définitive.

  • font-display: fallback;

    Le temps d'attente à blanc et le temps de l'étape 2 sont nuls ou très courts.

    Le texte est rapidement affiché dans une police de remplacement et restera définitivement dans cette police de remplacement.

    fallback peut être utilisée pour des textes longs, ou de façon plus générale pour le body de la page car elle permet d'obtenir très rapidement une page lisible, même si la police n'est pas celle qui est prévue.
    D'autre part cette valeur ne nécessite pas de recomposer la page lorsque la police est enfin disponible. Lors d'un prochain chargement de cette page, la police sera retrouvée dans le cache et affichée directement.

  • font-display: optional;

    Le temps d'attente à blanc est très court : le texte est affiché dans une police de remplacement. Le choix est laissé au navigateur de laisser le texte définitivement dans cette police ou d'attendre encore la disponibilité de la police demandée.

    Cette valeur offre le même avantage que fallback, à savoir une bonne rapidité d'affichage. On pourra l'utiliser pour de grands textes ou pour le body de la page.

  • font-display: initial;

    La valeur initiale est auto.

  • font-display: unset; font-display: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

La police utilisée pour afficher le mot "Résultat" ci-dessous est très longue à charger : au moins 5 secondes (le téléchargement du fichier est volontairement ralenti). Lorsque vous choisissez une valeur pour font-display, cela provoque un rechargement de la page et donc également de la police. Observez attentivement ce qui se passe au niveau du mot "Résultat".

font-display :
Résultat

Prise en charge par les navigateurs (compatibilité).

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Polices et caractères - Propriétés.

  • font : Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
  • font-family : Définit le nom de la police de caractères.
  • font-feature-settings : Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
  • font-kerning : Ajustement du crénage entre caractères.
  • font-size : Ajuste la taille des caractères.
  • font-size-adjust : Définition du coefficient d'aspect de la police.
  • font-stretch : Modifie l'étirement ou la compression des caractères.
  • font-style : Sélectionne les styles italique ou oblique de la police de caractères.
  • font-synthesis : Autorise ou non le calcul des styles manquants dans la police de caractères.
  • font-variant : Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
  • font-variant-alternates : Met en œuvre la substitution de caractères (polices OTF, WOFF).
  • font-variant-caps : Applique une capitalisation des caractères.
  • font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
  • font-variant-ligatures : Active ou désactive la ligature des caractères.
  • font-variant-numeric : Met en œuvre les modes d'affichage des nombres évolués : fractions, numéros, etc.
  • font-weight : Sélectionne une graisse pour les caractères.
  • text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
  • text-decoration-color : Définit la couleur du trait de décoration.
  • text-decoration-line : Type de décoration : souligné, barré, etc.
  • text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
  • text-shadow : Ombrage du texte.
  • text-transform : Casse du texte (minuscules, majuscules...).

Polices et caractères - Directives.

  • @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
  • @font-face : Définit tous les paramètres d'une police de caractères téléchargeable.
  • @font-feature-values : Définit les variantes typographiques à utiliser.