# Replier sur une police système le temps du chargement d’un thème, sans CLS

> Afficher immédiatement le texte avec une police système, puis basculer vers la police personnalisée sans provoquer de saut de mise en page perceptible.

- Auteur : WordPress Développement
- Publié le : 2024-06-22
- Mis à jour le : 2024-06-22
- Catégorie : Éditeur de site (FSE)
- URL : https://www.wpmoderne.fr/fse/replier-police-systeme-chargement-theme-sans-cls/

## L’essentiel

- font-display: swap affiche le texte avant même le chargement de la police finale
- size-adjust ajuste la police de repli pour limiter le saut de mise en page
- Une police de repli mal choisie annule une bonne partie du bénéfice

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

> L'essentiel à retenir : font-display: swap affiche le texte avant même le chargement de la police finale ; size-adjust ajuste la police de repli pour limiter le saut de mise en page ; Une police de repli mal choisie annule une bonne partie du bénéfice

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.