Les sites marketing statiques perdent encore des points sur le Cumulative Layout Shift dès qu’une police display remplace la pile système : le titre héros bouge de 4 à 12 px, les lignes de prix se décalent, Lighthouse colore le CLS en rouge alors que les images sont parfaites. En 2026, le CSS permet, dans @font-face, d’utiliser size-adjust ainsi que ascent-override, descent-override et line-gap-override pour indiquer au moteur comment occuper la même boîte typographique avant que la police finale ne soit décodée. Ce guide s’adresse aux équipes MPA ou générateurs HTML qui veulent une voie Safari/WebKit reproductible, pas seulement une CI Chromium. Croisez images responsives et LCP et titres avec balance et pretty pour synchroniser budgets image, typo et CLS.
Vous repartez avec une recette de mesure, un motif @supports, une matrice font-display, des garde-fous (balise d’alerte P75 terrain à 0,1, balayage size-adjust entre 90 et 110 %) et l’option MacHTML d’un Mac mini cloud à environ 16,9 $ par jour pour rejouer Safari réel.
Pourquoi les polices web cassent encore le CLS
Les fallbacks système et les polises premium ne partagent presque jamais les mêmes tables d’ascendant, de descendant et d’interligne. Quand font-display: swap peint la police web, chaque ligne du héros, de la navigation et du tableau de prix est recalculée. Si le CSS critique est inline mais le WOFF2 arrive du CDN 120 à 400 ms plus tard, le swap survient souvent après le début du scroll — le CLS terrain souffre plus que le labo Lighthouse.
font-display: block masque le texte et dégrade le FCP ; les marges négatives deviennent ingérables. Les overrides résolvent la géométrie avec des standards et restent stables jusqu’à 200 % de zoom si le tuning est prudent.
Ce que changent les overrides métriques
Les overrides ne modifient pas les contours de glyphes mais les métriques utilisées pour l’interligne et le rythme vertical. Un mauvais pourcentage se propage dans les piles flex mêlant icônes et chaînes traduites.
Avant toute modification CSS, capturez trois nombres dans DevTools : hauteur des capitales en fallback, hauteur avec la police web, écart sur line-height: normal. Une seule écriture dans le dépôt de design tokens suffit pour tous les marchés.
size-adjust vs overrides manuels
size-adjust homothétise tout le bloc métrique — utile quand la police web n’est que 2 à 6 % plus haute que -apple-system. Si les descendantes polonaises ou tchèques se coupent, baissez descent-override en gardant size-adjust vers 96 %. Une axe par commit, avec captures comparatives.
Encapsulez le bloc dans @supports (size-adjust: 90%) pour que les moteurs anciens ignorent proprement sans invalider toute la règle @font-face. Compatible avec preload WOFF2.
Accorder font-display
CGU et docs : font-display: optional d’abord — CLS quasi nul. Hero marque : swap + overrides ; vérifiez sur filmstrip WebPageTest que le swap arrive 40 ms avant le scroll. Évitez block sur de longs paragraphes : sur Safari mobile, les utilisateurs scrollent avant l’affichage.
Accessibilité : après chaque ajustement, un smoke VoiceOver — les limites de ligne peuvent changer acoustiquement. Prévoyez 20 minutes pour les empilements multilingues chiffrés.
Écrivez les pourcentages finaux dans la même pipeline qui génère des @font-face identiques en préprod et prod.
Pièges Safari / WebKit
WebKit applique les overrides dès la première police utilisable, parfois avant la fin du décodage distant — bon pour le CLS, mais le caret contenteditable peut légèrement migrer. Isolez les tests si la police marketing cohabite avec un éditeur CMS. Safari stable vs Safari Technology Preview peut diverger d’un mineur lors des grosses releases de polices.
Polices variables : si opsz par défaut est haut, baissez d’abord size-adjust avant d’ajuster axe par axe.
Snippet @font-face prêt à coller
@supports (size-adjust: 90%) {
@font-face {
font-family: "Brand Display";
src: url("/fonts/brand-display.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
size-adjust: 96%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
}Ciblez des WOFF2 mono-graisse sous 80 Ko ; sur Apple Silicon le décodage tourne souvent autour de 30 ms, sur vieux Intel Air jusqu’à 55 ms — documentez-le dans vos tableaux de bord perf.
Matrice de décision
| Scénario | font-display | Overrides | Raison |
|---|---|---|---|
| Hero marketing | swap | size-adjust + ascent/descent | Marque d’abord, plafonner le CLS |
| Documentation | optional | léger size-adjust | stabilité |
| Code monospace | swap | aligner sur le mono système | éviter le flou horizontal du pre |
| Localisation CJK | swap | mesure par langue | ne pas recycler les valeurs latines |
CLS labo vs terrain
Lighthouse montre l’effet immédiatement ; CrUX peut prendre jusqu’à 28 jours de retard. Instrumentez avec web-vitals, segmentez l’UA Safari, alertez si P75 > 0,1. Utilisez des échantillons de session replay pour les URL longue traîne non calibrées.
Budget serré : commencez par les pages où le texte héros représente > 35 % du CLS total.
FAQ
Polices variables ?
Oui — axes par défaut, puis size-adjust, puis réglage fin par axe.
Précharger toutes les graisses ?
Non : seulement celles du premier écran ; trop de preload vole la bande passante LCP (jusqu’à 80 ms sur profil 4G).
CSS tiers hébergé ?
Difficile à surcharger proprement — auto-hébergez le WOFF2 et maîtrisez la feuille complète.
Un Mac mini Apple Silicon en cloud reproduit la même pile Safari/Core Text que les ordinateurs portables décisionnels, pas une approximation Linux headless. Les nœuds MacHTML exposent SSH pour captures automatisées et scripts WebPageTest, et VNC pour une revue image par image. La consommation au repos est souvent d’environ 12 W : louer un mini deux semaines pour un sprint polices coûte souvent moins cher qu’un rollback en production.
La location évite l’actif lourd : tarif public d’environ 16,9 $ par jour, arrêt après campagne ; les tableaux de métriques restent dans Git sans amortir du matériel sur 36 mois.
Valider des polices CLS-friendly dans Safari réel
Louez un Mac mini cloud et vérifiez overrides et font-display avant de fusionner le CSS statique.