Vous chargez une page, le texte tarde à apparaître, puis surgit d’un coup, parfois après un bref éclair de police différente. Ce comportement, banal en apparence, dégrade pourtant l’expérience et la performance perçue d’un site. Il dépend d’une propriété CSS souvent ignorée : font-display. Elle détermine ce que fait le navigateur pendant qu’une police web se télécharge, entre masquer le texte, afficher une police de secours, ou abandonner la police personnalisée. Bien réglée, elle fait disparaître le texte invisible et limite les sauts de mise en page. Voyons ce que recouvre cette propriété, comment elle pilote l’affichage des polices, en quoi elle améliore la performance ressentie, et comment choisir la valeur la plus adaptée.

La propriété font-display, définition et rôle

La propriété font-display est une déclaration CSS, placée dans la règle qui charge une police, qui indique au navigateur comment se comporter tant que cette police n’est pas disponible. Elle agit directement sur des indicateurs suivis par les Core Web Vitals, en arbitrant entre rapidité d’affichage du texte et fidélité typographique. Son rôle, discret, conditionne pourtant la toute première impression du visiteur.

Le problème du chargement des polices web

Une police personnalisée est un fichier à télécharger, comme une image ou un script. Pendant ce téléchargement, le navigateur doit décider quoi faire du texte qui l’utilise : l’afficher tout de suite avec une autre police, ou attendre. Ce délai, invisible quand tout va vite, devient pénalisant sur une connexion lente ou avec des fichiers de police volumineux. Deux comportements problématiques en découlent. Soit le texte reste totalement invisible le temps du chargement, et l’internaute fixe une zone vide ; soit il apparaît dans une police de secours puis change brutalement d’apparence. Dans les deux cas, l’expérience souffre, et la perception de lenteur s’installe dès les premières secondes cruciales de la visite. Sans réglage explicite, ce comportement varie selon les navigateurs et échappe au contrôle du concepteur. Laisser ce choix au hasard revient à abandonner un levier important de performance perçue. C’est précisément ce vide de pilotage que la propriété font-display vient combler, en redonnant la main au développeur sur ce moment délicat.

Ce que contrôle font-display

Concrètement, font-display définit la stratégie d’affichage du texte pendant et après le chargement de la police. Elle répond à une question simple : faut-il privilégier le fait de montrer le texte au plus vite, quitte à le voir changer ensuite, ou attendre la police définitive au risque d’un blanc initial ? Tout l’arbitrage tient dans cette tension. La propriété agit en découpant le temps de chargement en phases, durant lesquelles le navigateur adopte un comportement précis. Selon la valeur choisie, le texte sera masqué, affiché en police de secours, ou figé sur cette dernière. Ce découpage en périodes est la mécanique fine que nous détaillerons, et qui distingue les différentes valeurs disponibles. Il faut souligner que font-display ne change rien au poids ni à la vitesse de téléchargement de la police elle-même. Elle n’agit que sur l’expérience pendant l’attente. C’est une nuance essentielle : elle optimise la perception, pas le réseau, et se combine donc avec d’autres techniques comme le préchargement pour un résultat optimal.

Comment font-display gère l’affichage des polices

Pour bien choisir, il faut comprendre la mécanique interne de font-display. Elle repose sur deux phénomènes opposés et sur une succession de périodes pendant lesquelles le navigateur applique une consigne précise. Ce sujet complète notre précédent article : CSS inutilisé.

FOIT et FOUT, deux comportements opposés

Le premier phénomène est le FOIT, pour texte invisible pendant le chargement. Le navigateur masque le texte jusqu’à ce que la police soit prête, ce qui garantit une apparence fidèle mais laisse l’utilisateur face à un vide. Sur une police lente à charger, ce blanc peut durer assez longtemps pour donner une impression de page cassée. Le second est le FOUT, pour texte non stylé pendant le chargement. Le navigateur affiche immédiatement le texte dans une police de secours, puis le remplace une fois la police web arrivée. Le texte est lisible tout de suite, mais ce changement provoque un basculement visuel parfois accompagné d’un décalage de la mise en page. Toute la propriété font-display consiste à choisir entre ces deux maux, ou à les doser. Il n’existe pas de réponse universelle : selon le site, on préférera éviter le vide ou le saut. Comprendre cet arbitrage de fond est indispensable pour ne pas se contenter d’appliquer une valeur au hasard sans en mesurer les effets.

Les valeurs de font-display

La propriété accepte plusieurs valeurs, chacune correspondant à un compromis. Les principales, auto, block, swap, fallback et optional, se distinguent par la durée pendant laquelle le texte reste invisible et par la possibilité de remplacer ensuite la police de secours. Ce sont autant de dosages entre vide et saut parmi lesquels choisir selon ses priorités. Aux extrêmes, block privilégie la fidélité typographique quitte à masquer le texte un instant, tandis que optional privilégie la stabilité et la rapidité, quitte à renoncer à la police web si elle tarde. Entre les deux, swap affiche tout de suite la police de secours et l’échange dès que possible. Chaque valeur traduit une priorité différente. Le tableau ci-dessous résume le comportement des principales valeurs de font-display.

Les périodes de blocage et d’échange

En coulisses, font-display découpe le chargement en une période de blocage et une période d’échange. Pendant le blocage, le texte peut être invisible ; pendant l’échange, la police de secours peut encore céder la place à la police web. La durée de ces fenêtres varie selon la valeur retenue et détermine le comportement observé. C’est la combinaison de ces deux périodes qui explique les différences entre valeurs. Une valeur sans période de blocage affiche le texte immédiatement ; une valeur sans période d’échange fige la police de secours une fois la fenêtre passée. Connaître ce mécanisme à deux temps permet de prédire exactement ce que verra l’utilisateur. Cette mécanique rappelle aussi pourquoi la vitesse de chargement de la police compte. Plus le fichier arrive vite, plus on reste dans la fenêtre favorable, et moins l’arbitrage se fait sentir. La propriété gère l’incertitude du réseau, mais une police légère et préchargée réduit d’autant le besoin de compromis difficiles.

Pourquoi font-display améliore la performance perçue

Bien réglée, font-display agit directement sur la performance perçue, ce moment où le visiteur juge un site rapide ou lent, qui se joue souvent avant le chemin de rendu critique complet. En supprimant le texte invisible, elle rapproche le contenu de l’instant du clic, ce qui améliore l’impression de vitesse sans changer une ligne de la logique métier.

Réduire le texte invisible

Le gain le plus net concerne le texte invisible. En affichant immédiatement une police de secours, on permet à l’internaute de commencer à lire sans attendre. Cette lisibilité immédiate du contenu est précieuse, car le texte est précisément ce que le visiteur est venu chercher, bien avant le raffinement typographique final. Cet effet se mesure dans les indicateurs de performance, où le moment du premier contenu affiché pèse lourd. Un texte qui apparaît tout de suite fait progresser ce repère et, avec lui, la note globale. La propriété devient ainsi un levier de score concret, particulièrement visible sur les pages très textuelles comme les articles ou les fiches. Au-delà des chiffres, il y a la dimension humaine. Un visiteur qui voit du texte ne doute pas que la page fonctionne, là où un écran vide sème l’inquiétude. Éviter ce vide, c’est entretenir la confiance dès la première seconde, et réduire les départs prématurés de ceux qui croiraient le site défaillant.

Limiter les décalages de mise en page

L’autre enjeu est la stabilité visuelle. Lorsque la police web remplace la police de secours, un changement de taille des caractères peut déplacer les lignes et provoquer un saut. Maîtriser font-display, c’est réduire ces décalages tardifs, qui agacent l’utilisateur et dégradent l’indicateur de stabilité suivi par les moteurs. Le choix de la police de secours joue ici un rôle clé. En sélectionnant une police aux proportions proches de la police web, on atténue le saut au moment de l’échange. Associée à une valeur de font-display adaptée, cette précaution limite l’amplitude du changement, jusqu’à le rendre quasi imperceptible pour l’oeil. Pour les sites où la stabilité prime absolument, certaines valeurs renoncent même à l’échange une fois le texte affiché. On accepte alors de ne pas charger la police web si elle tarde, au profit d’une mise en page parfaitement stable. Ce choix radical illustre bien que font-display est avant tout une affaire de priorités assumées.

Choisir la bonne valeur de font-display

Choisir la valeur de font-display revient à décider ce qui compte le plus pour votre site, entre fidélité, rapidité et stabilité. Il n’existe pas de réglage unique, mais des choix raisonnés selon le contexte et le rôle des polices dans le design.

swap, le choix le plus courant

La valeur swap est de loin la plus répandue, car elle offre un compromis sensé : le texte s’affiche aussitôt en police de secours, puis adopte la police web dès qu’elle est prête. On évite ainsi le texte invisible tout en conservant la typographie souhaitée à l’arrivée. C’est un point de départ raisonnable pour la majorité des sites. Son défaut est le saut visuel possible au moment de l’échange, surtout si les deux polices diffèrent beaucoup. On le tempère en choisissant une police de secours bien assortie. Avec cette précaution, swap devient une valeur sûre et polyvalente, qui satisfait la plupart des besoins sans réglage sophistiqué supplémentaire. Pour un site de contenu, où la lecture prime, ce comportement est idéal. Le visiteur accède immédiatement au texte, et le léger changement d’apparence reste secondaire face au confort de pouvoir lire sans attendre. C’est ce primat donné au contenu qui explique la popularité de cette valeur auprès des éditeurs.

optional pour la performance maximale

Quand la performance et la stabilité priment sur la typographie, optional est le choix le plus radical. Le navigateur affiche le texte en police de secours et n’utilise la police web que si elle est déjà disponible très tôt, sans jamais provoquer de saut ultérieur. On obtient une expérience parfaitement stable, au prix d’une fidélité typographique non garantie. Ce comportement convient particulièrement aux sites soucieux de leurs indicateurs de stabilité, ou destinés à des connexions lentes. Renoncer ponctuellement à la police web n’est pas un drame si la police de secours est bien choisie, et le bénéfice sur la fluidité se ressent immédiatement, surtout sur mobile où chaque saut se remarque davantage. L’usage d’optional gagne à s’accompagner d’un préchargement de la police, pour augmenter ses chances d’arriver à temps. Combinés, ces deux réglages offrent souvent le meilleur des deux mondes : la police web s’affiche dans la plupart des cas, sans jamais compromettre la stabilité quand le réseau fait défaut.

Précharger les polices critiques

Quelle que soit la valeur retenue, précharger les polices essentielles change la donne. En signalant au navigateur de les récupérer en priorité, on raccourcit l’attente et on reste plus souvent dans la fenêtre favorable. Ce chargement anticipé des polices clés renforce l’effet de n’importe quelle valeur de font-display. Le préchargement doit toutefois rester ciblé. Précharger toutes les polices reviendrait à encombrer le démarrage et à pénaliser le rendu, l’effet inverse de celui recherché. On réserve donc cette priorité aux polices visibles dès le premier écran, celles dont l’absence se remarquerait immédiatement, et l’on laisse les autres se charger normalement. Le tableau ci-dessous associe quelques profils de site à la valeur de font-display la plus adaptée, pour transformer ces principes en choix concret.