Font Chargement

TL;DR — A custom web font est a fichier le navigateur a à download avant il peut montrer votre texte dans il. Pendant que il waits, il soit hides le texte or montre a backup font et swaps plus tard — et soit choice peut lent bas or visually jump votre page. Vous contrôler que behavior avec un CSS line (font-display), et vous peut speed le font up par preloading il. Si vous ne pas besoin a custom font, a système font a rien à charger et rien à shift.

Ce que font chargement is

Quand vous utiliser a custom font — a brand font, a Google Font, n’importe quoi que n’est pas déjà on le visitor’s device — le navigateur a à go récupérer que font fichier avant il peut paint votre texte dans il. Que download takes temps, et le navigateur a à decide ce que à montrer dans le meantime.

Il a deux basic options, et les deux ont annoying noms:

• FOIT (Flash de Invisible Texte): hide le texte jusqu’à le custom font arrives. Lune page semble blank où le texte devrait être, alors il pops dans.
• FOUT (Flash de Unstyled Texte): montrer a normal backup font correct away, alors swap à le custom font une fois il charge. Vous voir texte immédiatement, mais il peut visibly “jump” quand le swap se produit si le deux fonts ne sont pas le même size.

Pourquoi c’est important pour le SEO

Aucun de ceux est gratuit. FOIT peut delay quand votre principal texte apparaît, qui hurts Plus grand affichage de contenu (LCP). FOUT peut causer a layout shift quand le font swaps dans, qui hurts Décalage cumulatif de mise en page (CLS). Les deux LCP et CLS sont Core Web Vitals — real-utilisateur metrics Google utilise as partie de page experience. Donc font chargement n’est pas simplement a design detail; c’est a SEO technique lever.

The simple fixes

• Utiliser a système font si vous pouvez. il y a rien à download, donc il y a aucun delay et aucun shift. Ce est le la plupart fiable corriger, complet arrêter.
• Si vous besoin a custom font, définir font-display. Ajout font-display: swap (or optional) à votre font indique le navigateur pas à laisser texte invisible pendant que il waits.
• Preload le important font. A <link rel="preload"> balise indique le navigateur à grab le font early au lieu de stumbling on il plus tard.

Vouloir le complet version — le font-display valeur tableau, le preload + optional combo, matching votre fallback font’s metrics, et Google vs. self-hosting? Switch à le Avancé tab.

TL;DR — Custom web fonts sont rendre-affecting external resources. Ils hit LCP quand a rendre-blocking font delays votre largest texte element, et CLS quand le fallback-à-web-font swap reflows le layout. Le deux par défaut behaviors — FOIT (invisible jusqu’à chargé) et FOUT (fallback alors swap) — chaque échouer differently. font-display est le principal lever (swap guarantees FOUT; optional donne a ~100ms window et alors commits, killing le plus tard swap). Preloading corrections late font discovery; preload + font-display: optional est le combo Google’s propre engineering singled out pour eliminating layout jank. Mais passing le Lighthouse font-display vérifier ne fait pas corriger CLS — que nécessite a metrically-matched fallback (or size-adjust/ascent-override overrides). None de ce est a direct facteur de classement; il feeds CLS/LCP, qui sont page experience signaux.

Pourquoi fonts are a special cas

«Most performance problems are about bytes — an image is too big, a script blocks the main thread. Fonts are worse than that in one specific way: they’re an external resource and they change the metrics of your text. So a font can hurt you two different ways at once. It can delay when text paints (an LCP problem), and it can change the size and shape of that text after it’s already on screen (a CLS problem). » (Traduction) (Résumé en français de la section dix-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Le deux par défaut navigateur behaviors sont worth naming parce que le entier topic hangs off les:

• FOIT (Flash de Invisible Texte): texte dans le custom font est rendu invisible jusqu’à le font charge or a timeout est hit — historically up à a ~3-deuxième bloquer dans la plupart navigateurs.
• FOUT (Flash de Unstyled Texte): le fallback font montre immédiatement, alors obtient swapped pour le web font une fois il charge.

FOIT feels “cleaner” (aucun jump) mais risques a rendu delay. FOUT feels faster (texte maintenant) mais risques a layout shift on swap. Aucun est automatiquement sûr — c’est le core idea à hold sur.

Il aussi aide à séparé le pipeline dans distinct stages, parce que success à un stage ne fait pas guarantee success à le suivant. A @font-face règle seulement declares a face — le navigateur récupère le réel font fichier seulement une fois matching styled texte on lune page exige il (declaration et matching sont séparé étapes depuis le récupérer). Que récupérer est subject à CORS si le font est servi cross-origin, donc a stylesheet que charge cleanly ne fait pas guarantee le font réponse itself carries le correct cross-origin permission — a manquant header là fails silently as a font que jamais renders. Et a successful récupérer encore ne fait pas guarantee a stable-looking page: cold-cache, warm-cache, et déjà-cached font states peut produce différent discovery et swap timing, donc testing un repeat page charger dans DevTools ne fait pas tell vous ce que a premier-time visitor en réalité voit.

How fonts affecter LCP

Si le largest visible element on votre page est texte — a big headline, a hero paragraph — alors le font que texte utilise peut become partie de votre LCP chemin. Per web.dev’s LCP guidance, le LCP resource de une page, si il a un, va être soit an image or a web font. A rendre-blocking font que laisse que texte invisible (FOIT) pushes votre LCP out jusqu’à le font arrives.

Le corriger ici est straightforward et comes straight depuis Google. On web.dev’s Optimize Plus grand affichage de contenu guide:

«> *“If you set a font-display value of anything other than auto or block, then

text will always be visible during load, and LCP won’t be blocked on an additional network request.”* — web.dev » (Traduction) (Résumé en français de la section vingt-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

En d’autres termes: swap, fallback, or optional tout garder text visible during charger, so votre LCP isn’t hostage to the font requête.

How fonts affecter CLS

CLS comes depuis le swap. Votre fallback font et votre web font presque jamais ont identical character widths et line heights, donc quand le navigateur remplace un avec le autre, le texte reflows — et tout ci-dessous il moves. c’est a layout shift.

Le counterintuitive partie, et le chose la plupart personnes miss: FOIT causes CLS aussi. Même invisible texte est encore laid out en utilisant le fallback font’s metrics, donc le swap encore moves choses. Depuis web.dev’s Optimize Décalage cumulatif de mise en page guide:

«> *“Both approaches can cause layout shifts. Even if the text is invisible, it’s

still laid out using the fallback font, so when the web font loads, the text block and the surrounding content shift”* — web.dev » (Traduction) (Résumé en français de la section trente-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Le même page frames le deux behaviors plainly:

«> *“The fallback font is swapped with the web font, incurring a Flash of Unstyled

Text (FOUT). ‘Invisible’ text is displayed using the fallback font until a web font is available and the text is made visible (FOIT—flash of invisible text).”* — web.dev » (Traduction) (Résumé en français de la section trente-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

j’ai said le même chose dans plainer terms dans mon Ahrefs écrire-up on Décalage cumulatif de mise en page: quand a font charge or changements, vous fin up avec a noticeable shift — a FOIT or a FOUT. c’est un de le la plupart courant real-world CLS causes, correct alongside images sans dimensions et contenu injected après charger.

The font-display property

font-display est a @font-face descriptor que contrôle deux windows: le bloquer period (comment long le navigateur hides texte waiting pour le font) et le swap period (comment long, après le bloquer period, il va encore swap dans le web font une fois il arrives). Per web.dev’s Meilleur Practices pour Fonts:

«MDN’s font-display reference, which Google’s own docs link to as the spec source, describes them tersely: swap gives an extremely small block period and an infinite swap period; optional gives an extremely small block period and no swap period. That “no swap period” is the whole point of optional — after the block period window closes, whatever font is in use stays, so there’s no later swap to shift the layout. » (Traduction) (Résumé en français de la section trente-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Un caution on le numbers dans que tableau: le CSS specification itself seulement defines bloquer/swap period categories — court, extremely petit, infinite, none — et laisse le exact duration à le navigateur. Le millisecond/deuxième figures ci-dessus sont web.dev’s documented Chromium behavior, pas a cross-navigateur guarantee. Treat les as illustrative plutôt que a spec promise, et vérifier actuel numbers pour whichever navigateur/version vous êtes en réalité testing contre.

Qui valeur pour qui contenu? web.dev’s propre advice est que ces peut être mixed: utiliser swap pour branding et autre visually distinctive elements (où seeing le brand font matters et a brief shift est acceptable), et optional pour corps texte (où CLS-sensitivity wins et vous’d plutôt pas shift). c’est a genuinely utile règle de thumb — ne pas appliquer un valeur site-wide par reflex.

Preloading fonts

Font requêtes sont découvert late. Le navigateur ne fait pas know il nécessite a font jusqu’à il a parsed votre CSS, matched a @font-face règle à an element on lune page, et decided que element est visible. Seulement alors fait il commencer le download. A <link rel="preload"> court-circuits que:

<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>

Que indique le navigateur à commencer fetching le font immédiatement, dans parallel avec tout sinon, au lieu de waiting à découvrir il. Bing’s engineering team décrit exactly ce mechanism on leur propre recherche pages (plus dans le Citations tab): le preload balises dans le <head> kick off le font downloads correct away, whereas sans les le navigateur ne ferait pas récupérer le fonts jusqu’à il avait parsed le CSS et trouvé matching elements.

Le strongest combination per Google’s propre writeup est preload + font-display: optional. web.dev’s Empêcher layout shifting et FOIT par preloading optional fonts calls combining <link rel="preload"> avec font-display: optional le la plupart effective façon à guarantee aucun layout jank quand rendu custom fonts, et notes que Chrome (depuis version 83) eliminated le layout shifting que utilisé à se produire quand preloading optional fonts. Le preload donne le font son meilleur shot à arriving à l’intérieur le ~100ms window; optional guarantees que si il ne fait pas, vous ne pas pay pour il avec a shift.

Quand pas à preload. Preloading n’est pas gratuit. web.dev warns que preload est highly effective à making fonts discoverable early, mais il comes à le coût de taking navigateur resources away depuis chargement autre resources. Preload le un or deux fonts vous en réalité besoin ci-dessus le fold — preloading chaque font weight vous propre peut starve plus important resources et faire lune page slower overall.

Assurez-vous le preload en réalité obtient reused. A preload seulement aide si le navigateur peut match il à le réel font requête — le href, as="font", type, et crossorigin mode tout ont à line up avec ce que le CSS @font-face règle ends up requesting, or vous’ll obtenir an “unused preload” warning et a wasted deuxième download au lieu de a faster un. Preloading peut aussi bypass unicode-range selection, pulling bas a subset vous n’a pas en réalité besoin pour que page. Confirmer le match dans DevTools’ Network panel: vous vouloir à voir un requête pour que font, kicked off par le preload, pas deux.

Fixing le shift itself: fallback metric matching

Ici’s le trap: passing le Lighthouse font-display vérifier fait pas corriger CLS. Google’s Lighthouse docs sont explicit que FOIT et FOUT ont le même impact on CLS une fois le custom font remplace le temporary système font. Donc swap rend votre texte visible (bon pour LCP et pour le “invisible text” audit) mais laisse le swap shift dans placer.

À kill le shift quand a swap fait se produire, vous ont à faire le fallback font et le web font prendre up le même space. Deux levers:

1. Pick a metrically-similar système fallback dans votre font-family stack, plutôt que a unique custom font nom avec rien sensible behind il. Le closer le fallback’s character widths et line height sont à le web font, le plus petit le shift.
2. Override le web font’s metrics avec size-adjust, ascent-override, descent-override, et line-gap-override on le @font-face règle, donc le web font est forced à match le fallback’s box. web.dev listes ces descriptors, et Smashing Magazine’s deep dive on CSS font descriptors walks via les dans detail si vous vouloir à go tout le façon.

Chaque de ceux four descriptors adjusts a différent metric, et actuel navigateur prise en charge varies par descriptor — vérifier compatibility avant leaning on quelconque unique un. Valider contre le réel weights, styles, et scripts vous ship, aussi: a corriger confirmed on votre regular-weight Latin texte ne fait pas guarantee bold, italic, or a non-Latin script behave le même façon.

DebugBear’s Fixing Layout Shifts Caused by Web Fonts is a bon end-to-end walkthrough of ce: mesurer the impact, identifier the problem font, appliquer font-display, choisir a meilleur fallback, alors adjust font metrics.

Google Fonts vs. self-hosting

Vous ne pas ont à self-host à contrôler font-display. Le Google Fonts CSS2 API accepts a display requête parameter — https://fonts.googleapis.com/css2?family=Roboto&display=swap sets font-display directement on le servi @font-face règles. Addy Osmani’s post on shipping font-display à Google Fonts covers le modifier: previously le seulement façon à specify font-display pour Google Fonts était à self-host les, et ce supprimé que besoin.

Self-hosting encore wins on un chose: il eliminates le supplémentaire DNS lookup et connection à fonts.googleapis.com et fonts.gstatic.com. c’est a réel latency coût, et un de le raisons a preconnect resource hint à ceux origins aide si vous faire utiliser Google Fonts. Weigh le connection overhead contre le convenience — et ne pas assume “c’est depuis Google, donc c’est fine.” A copy-pasted Google Fonts embed est encore a rendre-blocking stylesheet requête plus a font requête, et older embeds peut pas carry a display valeur à tout.

«There’s no universal winner between the two options — it comes down to which scripts and weights you actually ship, your caching setup, and the font’s license terms. Run the comparison against your own pages rather than defaulting to whichever one a tutorial recommended. » (Traduction) (Résumé en français de la section cinquante-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Variable fonts

A variable font packs nombreux weights et styles (regular, bold, condensed, italic) dans a unique fichier avec adjustable axes. Que peut être a net win — un requête à la place de six — si vous en réalité utiliser plusieurs de ceux variants. Mais a complet variable font est a bigger unique fichier que un static weight, donc si vous seulement ever rendre un weight, shipping le entier variable font peut être slower, pas faster. Subset il à le axes et characters vous utiliser, servir il as WOFF2 donc c’est compressed, et vérifier le font’s license — pas chaque foundry permits subsetting or self-hosting.

Reducing the fichier in the premier placer

Tout ci-dessus manages quand le font charge. Vous pouvez aussi shrink ce que charge. Font subsetting strips out glyphs vous ne pas utiliser (an tous-Latin site ne fait pas besoin Cyrillic et CJK ranges), et WOFF2 est le well-compressed format à servir. A plus petit font fichier est plus probable à arrive à l’intérieur optional’s window et moins probable à bloquer LCP — subsetting et compression sont le complementary lever à font-display et preload, pas an alternative à les.

il y a aucun unique “correct” subset or universal byte-savings percentage ici, though — il dépend on le scripts, characters, et weights votre spécifique public en réalité nécessite. A number vous saw dans quelqu’un else’s cas study or benchmark n’est pas a promise pour votre pages; mesurer votre propre font requêtes avant et après.

Is ce a ranking factor?

Être precise ici. Font chargement est pas a direct facteur de classement. Ce que il affecte est CLS et LCP, qui sont Core Web Vitals et partie de Google’s page experience signaux. Et page experience est a lightweight, tiebreaker-style signal — pertinence et qualité dominate; il aide decide entre sinon comparable résultats, pas entre a great page et a poor un. Donc le honest framing est: corriger votre font chargement parce que c’est a genuine utilisateur-experience problème que se produit à feed deux classement inputs — pas parce que a font-display valeur va déplacer vous up le résultats on son propre.

My propre prendre

À travers mon Ahrefs CLS et LCP guides j’ai landed on le même priority order, et il encore holds. Si vous pouvez utiliser a système font, faire que — il y a rien à charger, donc là sont aucun delays or changements que causer a shift. Si vous ont à utiliser a custom font, le actuel meilleur méthode pour minimizing CLS est à combine <link rel="preload"> (grab le font as soon as possible) avec font-display: optional (donner il a petit window à charger); si il ne fait pas faire il dans temps, lune page simplement montre a par défaut font, et votre custom font obtient mis en cache et montre up on subsequent charge. Preload, alors optional, alors — meilleur de tout — simplement ne pas utiliser a custom font. c’est le entier ladder.

AI summary

A condensed prendre on the Avancé version:

• Font chargement = ce que le navigateur montre pendant que a custom font downloads. c’est a special cas parce que fonts sont les deux an external resource et ils modifier texte metrics — donc ils peut hurt deux Core Web Vitals à une fois.
• LCP: a rendre-blocking font que hides votre largest texte element (FOIT) delays LCP. Quelconque font-display valeur autre que auto/block garde texte visible donc LCP n’est pas bloqué on le font.
• CLS: le fallback-à-web-font swap reflows le layout. FOIT causes CLS aussi — invisible texte est encore laid out dans le fallback’s metrics, donc le swap encore shifts.
• font-display est le principal lever: swap = FOUT (rapide texte, encore swaps); optional = ~100ms window alors commits, donc aucun plus tard swap et aucun swap-related shift. web.dev suggests mixing les: swap pour branding, optional pour corps.
• Preload corrections late font discovery. Preload + font-display: optional est Google’s singled-out combo pour eliminating layout jank (Chrome 83+). ne pas over-preload — il steals resources depuis autre charge.
• Passing le Lighthouse font-display audit ≠ fixing CLS. Le swap shift est a séparé corriger: a metrically-matched fallback, or size-adjust/ascent-override/ descent-override/line-gap-override.
• Google Fonts peut définir font-display via le &display= URL parameter (aucun self-hosting nécessaire); self-hosting encore supprime le supplémentaire connection hop.
• Pas a direct facteur de classement — il feeds CLS/LCP, qui sont page experience signaux (a tiebreaker). Meilleur corriger de tout: utiliser a système font.

Documentation officielle

Primary-source documentation depuis Google et Bing.

Google

• Meilleur Practices pour Fonts (web.dev) — le font-display valeur tableau (bloquer/swap periods) et le mix-stratégie advice.
• Optimize Décalage cumulatif de mise en page (web.dev) — le FOIT/FOUT explanation et pourquoi les deux causer layout shift.
• Optimize Plus grand affichage de contenu (web.dev) — quand a web font est le LCP resource et comment font-display garde texte visible.
• Empêcher layout shifting et FOIT par preloading optional fonts (web.dev) — le preload + font-display: optional combo et le Chrome 83 corriger.
• Optimize WebFont chargement et rendu (web.dev) — broader font-loading performances guide.
• Apprendre: Optimize web fonts (web.dev) — le structured lesson version.
• Garantir texte remains visible during webfont charger (Chrome pour Developers) — le Lighthouse font-display audit. Remarque: as de Lighthouse 13 ce déplacé depuis a standalone audit dans a broader “Font display insight” panel, donc older screenshots et guides utiliser le old naming.
• Google Fonts CSS2 API — display parameter — paramètre font-display viune URL sans self-hosting.
• MDN — font-display — le CSS spec référence Google’s propre docs lien à pour valeur definitions.

Bing / Microsoft

• Rapide Front-End Performances pour Microsoft Bing (Bing Recherche Qualité Insights, Aug 2022) — documents font preloading as a production technique on Bing’s propre résultats pages. Remarque: ce post confirms le preload mechanism seulement; il ne fait pas cover font-display, FOIT/FOUT, CLS, or LCP par nom.

Quotes from the source

On-le-record statements depuis Google’s Chrome/web.dev docs et Bing engineering. Font chargement lives dans le rendu/performances spec area, donc le principal sources ici sont le Chrome et web.dev teams (pas Recherche Relations) — là est aucun on-record Recherche team citation appel font-display a classement topic, et Je’m pas going à invent un.

«Google — web.dev (Chrome team) » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “Both approaches can cause layout shifts. Even if the text is invisible, it’s still laid out using the fallback font, so when the web font loads, the text block and the surrounding content shift” — web.dev, Optimize Cumulative Layout Shift. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “The fallback font is swapped with the web font, incurring a Flash of Unstyled Text (FOUT). ‘Invisible’ text is displayed using the fallback font until a web font is available and the text is made visible (FOIT—flash of invisible text).” — web.dev, Optimize Cumulative Layout Shift. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-quatre, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- “If you set a font-display value of anything other than auto or block, then text will always be visible during load, and LCP won’t be blocked on an additional network request.” — web.dev, Optimize Largest Contentful Paint. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-quatre, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

Bing — preloading fonts dans production

• Bing’s engineering team décrit preload balises dans le <head> que tell le navigateur à commencer downloading son custom web fonts immédiatement; sans ceux balises, le navigateur ne ferait pas récupérer le fonts jusqu’à il avait parsed le CSS et encountered matching elements — donc preloading rend les disponible dans temps pour texte rendu. Lire le post

«Note: the Bing point above is paraphrased from the Aug 2022 Bing post rather than quoted verbatim; the post confirms the preload technique in production, not a full CWV/font-display doctrine, so don’t read a broader Bing stance into it. The web.dev quotes with #:~:text= deep links jump straight to the quoted passage on the live page. » (Traduction) (Résumé en français de la section quatre-vingt-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Font-loading checklist » (Traduction) (Résumé en français de la section quatre-vingt-dix, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«A quick pass to make sure fonts aren’t quietly wrecking your Core Web Vitals: » (Traduction) (Résumé en français de la section quatre-vingt-onze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- [ ] Every custom @font-face (or Google Fonts URL) sets a deliberate font-display value — not the browser default. » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- [ ] Body text uses font-display: optional (or a metrically-matched swap) to avoid a swap-driven layout shift. » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- [ ] The one or two fonts used above the fold are preloaded with <link rel="preload" as="font" type="font/woff2" crossorigin>. » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- [ ] You’re not preloading every weight — only what’s needed for the initial render. » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- [ ] The preload’s href, as="font", type, and crossorigin match the real @font-face request (checked in the Network panel) — no unused preload, no duplicate download. » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- [ ] Your font-family stack names a sensible system fallback, not just the custom font. » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.) «- [ ] If a swap still shifts, fallback metrics are matched (size-adjust, ascent-override, descent-override, line-gap-override). » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie sept : le texte source est conservé pour vérification lors de la relecture francophone.) «- [ ] Fonts are served as WOFF2 and subset to the characters/weights you actually use. » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie huit : le texte source est conservé pour vérification lors de la relecture francophone.) «- [ ] Google Fonts embeds include a display parameter and a preconnect to fonts.gstatic.com. » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie neuf : le texte source est conservé pour vérification lors de la relecture francophone.) «- [ ] Variable fonts are only used when you render multiple variants — otherwise a single static weight may be lighter. » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie dix : le texte source est conservé pour vérification lors de la relecture francophone.) «- [ ] You’ve confirmed with PageSpeed Insights / Lighthouse that fonts aren’t the LCP element or a CLS culprit. » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie onze : le texte source est conservé pour vérification lors de la relecture francophone.)

«## The mental models » (Traduction) (Résumé en français de la section quatre-vingt-quinze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

1. Fonts hit deux vitals via deux mechanisms. LCP: a rendre-blocking font hides votre largest texte element jusqu’à il charge. CLS: le fallback→web-font swap changements texte metrics et reflows. Corriger les as deux séparé problèmes, parce que un corriger (swap) aide LCP mais laisse CLS untouched.

2. FOIT vs. FOUT — les deux échouer, differently. FOIT (invisible jusqu’à chargé) risks a rendering delay → LCP. FOUT (fallback alors swap) risks a layout shift → CLS. Là is aucun “safe default”; vous have to choisir and mitigate.

3. Le font-display décision. optional = a ~100ms window, alors commit avec aucun plus tard swap (meilleur pour CLS-sensitive corps texte). swap = montrer texte maintenant, guarantee le brand font eventually (meilleur pour branding, accept a petit shift). Mix les per element plutôt que un valeur everywhere.

4. Discovery vs. rendre. Preload corrections discovery (le navigateur learns à propos de le font early). font-display corrections rendre behavior (ce que montre pendant que il charge). Fallback-metric matching corrections le shift itself. ils sont three différent levers — vous souvent vouloir tout three.

5. Le bon / meilleur / meilleur ladder. Bon: preload votre fonts (meilleur encore, même-origin, à drop le supplémentaire connection). Meilleur: font-display: optional, paired avec preload, donc a lent font simplement montre a par défaut et caches pour suivant temps. Meilleur: utiliser a système font — rien charge, donc aucun delay et aucun shift.

Font chargement — cheat sheet

font-display valeurs (block / swap periods, per web.dev):

«| Value | Block | Swap | Good for | | --- | --- | --- | --- | | auto | Browser-dependent | Browser-dependent | Nothing — it’s the unmanaged default | | block | 2–3s | Infinite | Rarely — causes FOIT, risks LCP | | swap | 0ms | Infinite | Branding/headlines (fast text, but swaps → can shift) | | fallback | 100ms | 3s | A compromise: brief block, limited swap window | | optional | 100ms | None | Body text (no swap → no swap-driven CLS) | » (Traduction) (Résumé en français de la section cent cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Figures above are web.dev’s documented Chromium behavior. The CSS spec itself only defines block/swap period categories (short, extremely small, infinite, none) and leaves exact timing to the browser — verify current numbers for the browser you’re testing. » (Traduction) (Résumé en français de la section cent six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«The two failure modes » (Traduction) (Résumé en français de la section cent sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- FOIT = invisible until loaded → risks delaying LCP. » (Traduction) (Résumé en français de la section cent sept, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- FOUT = fallback then swap → risks a layout shift → CLS. » (Traduction) (Résumé en français de la section cent sept, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Both cause CLS once the swap happens; only fallback-metric matching or optional prevents it. » (Traduction) (Résumé en français de la section cent sept, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.)

«The fixes, in priority order

1. Use a system font (nothing loads).
2. Preload the critical font (as="font" type="font/woff2" crossorigin).
3. Set font-display (optional for body, swap for branding).
4. Match the fallback’s metrics (size-adjust, ascent-override, descent-override, line-gap-override).
5. Subset + WOFF2 to shrink the file itself. » (Traduction) (Résumé en français de la section cent huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google Fonts fast facts » (Traduction) (Résumé en français de la section cent neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Add &display=swap (or optional/fallback) to the CSS2 URL to set font-display without self-hosting. » (Traduction) (Résumé en français de la section cent neuf, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Still a render-blocking stylesheet + a separate font request — add preconnect to fonts.gstatic.com. » (Traduction) (Résumé en français de la section cent neuf, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Self-hosting removes the extra DNS/connection hop. » (Traduction) (Résumé en français de la section cent neuf, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.)

«Diagnose » (Traduction) (Résumé en français de la section cent dix, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- PageSpeed Insights / Lighthouse “Font display insight” (was the standalone “Ensure text remains visible during webfont load” audit before Lighthouse 13). » (Traduction) (Résumé en français de la section cent dix, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Chrome DevTools Performance + Network panels — see when fonts load relative to first paint and shifts. » (Traduction) (Résumé en français de la section cent dix, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Font-loading myths and mistakes » (Traduction) (Résumé en français de la section cent treize, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Chaque de ces est a réel, courant audit finding — avec pourquoi c’est incorrect et Que faire à la place.

«“font-display: swap fully solves my CLS problem.” Why it’s wrong: swap fixes FOIT (text is visible immediately, good for LCP and the Lighthouse audit) but it guarantees FOUT — and if the fallback and web font differ in size, the swap still shifts the layout. Google’s Lighthouse docs note FOIT and FOUT have the same impact on CLS once the swap happens. Do instead: pair it with a metrically-matched fallback (or use optional), so the swap doesn’t move anything. » (Traduction) (Résumé en français de la section cent quinze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

“Preloading a font always speeds up my page.” Pourquoi c’est incorrect: web.dev est explicit que preload comes à le coût de taking navigateur resources away depuis chargement autre resources. Preloading fonts vous ne pas besoin ci-dessus le fold delays plus important fonctionner. Faire à la place: preload seulement le un or deux fonts nécessaire pour le initial rendre.

“font-display: optional signifie le custom font jamais charge.” Pourquoi c’est incorrect: il charge et est mis en cache — c’est simplement pas utilisé on que spécifique page charger si il misses le ~100ms window. Une fois mis en cache, plus tard page views typically montrer il immédiatement. Faire à la place: utiliser optional pour CLS-sensitive corps texte sans worrying que returning visitors miss le brand font.

“Quelconque font-display valeur corrections le Lighthouse ‘invisible texte’ warning, donc Je’m fait.” Pourquoi c’est incorrect: passing que audit est necessary mais pas sufficient — le swap layout shift est a séparé, related-mais-distinct problème. Faire à la place: après clearing le audit, vérifier CLS et corriger le fallback metrics si le swap encore shifts.

“Google Fonts sont auto-optimized et ne peut pas cause CWV problèmes.” Pourquoi c’est incorrect: a copy-pasted Google Fonts embed est encore a rendre-blocking stylesheet requête plus a séparé font requête unless display et preconnect/preload sont configuré. “c’est depuis Google donc c’est fine” est a courant real-world audit miss. Faire à la place: ajouter &display=, preconnect à fonts.gstatic.com, et preload le critical weight.

“Font loading est a UX-seulement concern avec aucun SEO pertinence.” Pourquoi c’est incorrect: CLS et LCP sont Core Web Vitals et partie de Google’s page experience signaux. Font choices sit directement dans a SEO technique’s remit. Faire à la place: treat font chargement as partie de votre CWV fonctionner — pendant que keeping il dans proportion (page experience est a tiebreaker, pas a principal factor).

Trouver the fonts chargement on une page

A rapide DevTools Console snippet to liste every font face le navigateur en réalité chargé, and si chaque is fait — utile pour spotting a heavy or slow font.

Chrome DevTools Console

// List loaded font faces and their status
[...document.fonts].map(f => ({
  family: f.family,
  weight: f.weight,
  style: f.style,
  status: f.status,          // "loaded", "loading", "unloaded", "error"
  display: f.display,        // the font-display value in effect
}));

// When did fonts finish loading? (relative to navigation start)
document.fonts.ready.then(() =>
  console.log("All fonts ready at", performance.now().toFixed(0), "ms")
);

Watch pour font-driven layout shifts

Paste ce dans le Console à log CLS entries as ils se produire, notamment le elements que déplacé — handy pour confirming a font swap est le culprit.

«Chrome DevTools Console » (Traduction) (Résumé en français de la section cent vingt-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log("Layout shift", entry.value.toFixed(4),
        entry.sources?.map(s => s.node));
    }
  }
}).observe({ type: "layout-shift", buffered: true });

«## Check that a font file is WOFF2 and reasonably sized » (Traduction) (Résumé en français de la section cent vingt-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Fonts should be WOFF2 and subset. Point these at a font URL to check its size and type. » (Traduction) (Résumé en français de la section cent trente, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«macOS / Linux » (Traduction) (Résumé en français de la section cent trente et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

curl -sI https://example.com/fonts/brand.woff2 \
  | grep -iE "content-type|content-length"

«Windows / PowerShell » (Traduction) (Résumé en français de la section cent trente-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

$r = Invoke-WebRequest -Method Head https://example.com/fonts/brand.woff2
$r.Headers["Content-Type"]; $r.Headers["Content-Length"]

A grand content-length (bien dans le hundreds de KB pour a unique weight) est a subsetting/compression opportunity.

Qui font-loading strategy fits lune page?

Prove a font-loading modifier worked

Critical-font preload tester

Tester à exécuter: reload avec cache disabled et inspect le font requête’s initiator et commencer temps dans le Network panel. Attendu résultat: le prévu critical font commence early et est reused par CSS sans a duplicate download. Échec interpretation: le preload attributs ne faites pas match le CSS requête or le font n’est pas en réalité critical. Monitoring window: immediate. Rollback trigger: duplicate requêtes, console erreurs, or contention que delays plus important resources.

Font-swap stability tester

Tester à exécuter: throttle le charger pendant que recording le Performances panel Layout Shifts track. Attendu résultat: fallback texte remains visible et le final font ne fait pas créer a measurable shift. Échec interpretation: fallback metrics encore differ or le swap se produit aussi late. Monitoring window: immediate à travers pris en charge breakpoints. Rollback trigger: hidden texte, clipped texte, or pire CLS.

Field-vitals tester

Tester à exécuter: comparer post-release LCP et CLS pour le modifié template avec le prior RUM baseline. Attendu résultat: le targeted metric améliore sans degrading le autre. Échec interpretation: le font était pas le bottleneck or le stratégie traded chargement speed pour instability. Monitoring window: RUM as trafic arrives; CrUX over son rolling window. Rollback trigger: soit champ metric worsens consistently.

Ressources utiles

Mon connexe writing

• Ce que Est Décalage cumulatif de mise en page (CLS) & Comment Améliorer Il (Ahrefs) — mon CLS guide, notamment le preload + font-display: optional corriger pour font-driven shifts.
• Ce que Est Plus grand affichage de contenu (LCP) & Comment Améliorer Il (Ahrefs) — le bon/meilleur/meilleur font ladder pour LCP.
• Ce que Sont Core Web Vitals (CWVs) & Comment Améliorer Les (Ahrefs) — où CLS et LCP fit dans le bigger CWV picture.
• Patrick Stox on le Ahrefs blog — le rest de mon SEO technique writing.

Depuis autour le industry

• Fixing Layout Shifts Caused par Web Fonts (DebugBear, Umar Hansa) — de bout en bout: mesurer → trouver le font → font-display → meilleur fallback → adjust metrics.
• Garantir texte remains visible during webfont charger (DebugBear) — le Lighthouse-audit-spécifique troubleshooting angle.
• Comment éviter layout shifts caused par web fonts (Simon Hearne) — a practitioner-level deep dive.
• FOUT, FOIT, FOFT (CSS-Tricks) — le canonical explainer pour le terminology.
• A Nouveau Façon À Reduce Font Chargement Impact: CSS Font Descriptors (Smashing Magazine) — le size-adjust/ascent-override/descent-override/line-gap-override technique dans depth.
• Comment Reduce Layout Reflow Quand En utilisant Web Fonts (Material Design) — a practical CSS-descriptor walkthrough depuis Google’s Material team.
• Nous shipped font-display à Google Fonts (Addy Osmani) — le display URL parameter et pourquoi il supprimé le besoin à self-host pour font-display contrôler.

Testez vos connaissances: Font Chargement

Five rapide questions on how web fonts affecter Core Web Vitals. Pick an réponse pour chaque, alors vérifier.

Journal des modifications