Comment afficher du texte immédiatement, sans attendre le téléchargement complet d’une police personnalisée, sans provoquer ensuite un saut de mise en page au moment où cette police finit par arriver ? C’est la tension exacte que couvre la propriété font-display, combinée à un réglage plus récent, size-adjust, moins connu mais souvent plus décisif sur le score final de Cumulative Layout Shift.
Le problème : deux polices, deux métriques différentes
La valeur swap de font-display répond à la première partie du problème : elle indique au navigateur d’afficher immédiatement le texte avec une police de repli, puis de le remplacer dès que la police personnalisée est disponible, plutôt que de laisser un espace vide en attendant. Mais si la police de repli et la police finale n’ont pas la même largeur moyenne de caractère, le remplacement provoque un réajustement visible du texte, parfois suffisant pour faire bouger les éléments qui suivent dans la page — exactement ce que la métrique CLS mesure.
Le snippet : ajuster la police de repli plutôt que la subir
La propriété size-adjust, déclarée dans une règle @font-face dédiée à la police de repli, permet de redimensionner celle-ci pour qu’elle occupe approximativement le même espace que la police finale, sans attendre le chargement de cette dernière pour le savoir :
@font-face {
font-family: 'Repli Ajuste';
src: local('Arial');
size-adjust: 105%;
ascent-override: 90%;
}
body {
font-family: 'Texte Variable', 'Repli Ajuste', sans-serif;
font-display: swap;
}La valeur de size-adjust se détermine par comparaison directe : on affiche un même texte avec chaque police, on mesure la largeur obtenue, et on ajuste le pourcentage jusqu’à ce que les deux largeurs se rapprochent suffisamment pour que le remplacement final ne provoque plus de réajustement perceptible.
Intégration dans un thème hybride
Dans un thème dont la police personnalisée est déclarée via theme.json, la règle de repli ajustée reste à écrire dans une feuille de style classique du thème, chargée via wp_enqueue_style(), puisque theme.json ne propose pas encore de clé dédiée à size-adjust pour les polices de repli. La police déclarée dans theme.json reste la police principale ; la règle de repli intervient en complément, dans la chaîne de polices de secours.
{
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "'Texte Variable', 'Repli Ajuste', sans-serif",
"slug": "texte-principal",
"name": "Texte principal"
}
]
}
}
}Variantes utiles
- tester plusieurs polices système de repli selon la plateforme du visiteur, puisque les métriques d’une police système varient d’un système d’exploitation à l’autre ;
- combiner ce réglage avec un préchargement classique de la police finale, pour réduire la durée pendant laquelle la police de repli reste affichée ;
- mesurer le score de CLS obtenu séparément pour les visiteurs mobiles et de bureau : les polices système par défaut diffèrent souvent entre les deux, avec des écarts de largeur qui ne sont pas symétriques.
Une limite à connaître
L’ajustement par size-adjust reste une approximation : il rapproche les largeurs moyennes, mais ne garantit pas un alignement caractère par caractère, en particulier sur des textes très courts comme des titres, où un seul mot peut suffire à révéler un léger écart résiduel malgré l’ajustement.
Nous considérons un ajustement de repli comme suffisant dès que le score de CLS mesuré sur les pages types du site repasse sous le seuil recommandé, sans chercher une correspondance parfaite qui demanderait un temps disproportionné par rapport au gain réel perçu par les visiteurs.
Ce qu’on retient de ce réglage
Sur le projet où nous avons appliqué cette méthode, le score de CLS mesuré est passé de 0,18 à 0,02 après ajustement de la police de repli, sans aucune modification de la police finale elle-même. C’est un exemple assez net de réglage à faible effort et fort impact, souvent négligé au profit d’optimisations plus visibles mais moins déterminantes sur cette métrique précise.
