Static marketing sites still lose Cumulative Layout Shift points the moment a display webfont replaces the system stack: the hero headline drops 4–12 px vertically, eyebrow labels jump sideways, and Lighthouse prints a red CLS tile even though images were perfect. In 2026, CSS lets you teach the browser how the webfont should occupy the same typographic box as your fallback before paint settles—using size-adjust plus granular ascent-override, descent-override, and line-gap-override inside @font-face. This guide is for teams shipping MPA or generator-built HTML who need a reproducible Safari/WebKit lane, not only Chromium-only CI. Cross-read responsive images for LCP and headline wrapping with balance and pretty so typography, imagery, and CLS budgets move together.
You will leave with a measurement recipe, a progressive enhancement pattern using @supports, a decision matrix for font-display, and numeric guardrails (0.05 CLS field budget per interaction, 90–110% starting range for size-adjust sweeps) that designers can actually review in Git diffs.
Why webfonts still nuke CLS on static pages
Fallback system fonts and premium brand faces rarely share identical ascent, descent, or line gap tables. When font-display: swap finally paints the webfont, the browser recomputes line boxes for every wrapped line in the hero, navigation, and pricing table. Because static sites often inline critical CSS but stream WOFF2 files from a CDN 120–400 ms later, users perceive the jump as “cheap animation” even when the page is otherwise fast. Marketing teams then over-correct with font-display: block, hiding text for hundreds of milliseconds and tanking First Contentful Paint instead.
Metric overrides solve the geometry mismatch instead of hiding it. They tell WebKit and Chromium the scaled metrics to use before the final face arrives, so the swap becomes visually neutral. That is different from faux-bold hacks or negative margins—it is standards-based and survives zoom levels up to 200% when tuned conservatively.
What metric overrides change under the hood
Overrides adjust how the user agent constructs the scrolling metrics of a font: cap height, x-height ratio, and default line spacing. When you specify ascent-override: 90%, you are not changing glyph outlines; you are changing the used font metrics that participate in line-height calculations and vertical rhythm between flex items. That is why a single bad percentage can ripple through sticky navigation stacks that mix icon fonts, numerals, and translated strings.
Static HTML authors should snapshot three numbers from DevTools before touching CSS: fallback cap-to-baseline distance, webfont cap-to-baseline distance, and the difference in default line-height: normal between the two faces. Designers rarely document those numbers—capture them once in your design token repo so every locale reuses the same offsets.
size-adjust versus manual overrides
size-adjust is the blunt instrument: it scales all font metrics uniformly, which is often enough when the webfont is merely 2–6% taller than -apple-system. When headlines still clip descenders on Polish or Czech strings, layer descent-override a few points lower while keeping size-adjust near 96%. Treat manual overrides as trim tabs on an aircraft: adjust one axis at a time, commit after each change, and never ship Friday-afternoon combinations without a visual diff.
Wrap the entire override block in @supports (size-adjust: 90%) so older engines ignore unknown declarations without invalidating the whole @font-face rule. That pattern keeps your WOFF2 preload valid while still giving modern Safari the hint it needs.
font-display pairing rules
Use font-display: optional when brand presence matters less than zero CLS—think pricing disclaimers and dense documentation. Pair optional faces with metric overrides anyway so the rare swap still lands softly. Reserve swap for hero display weights where marketing insists on the exact curve; combine swap with overrides plus a 40 ms budget check in WebPageTest filmstrips to ensure the swap happens before readers scroll.
Avoid block on body copy longer than 600 characters; it increases bounce on mobile Safari where users scroll before fonts finish blocking. If legal insists on FOIT, scope block only to the subheading that carries regulatory text.
Accessibility reviewers should re-run VoiceOver after each override change: metrics influence how VoiceOver announces line boundaries even when DOM text is unchanged. Budget 20 minutes per locale for screen-reader smoke tests when you touch heading stacks that mix numerals and localized strings.
Finally, document the chosen percentages beside your design tokens so static site generators can emit identical @font-face blocks for preview and production. Mismatched preview environments are the top reason teams abandon overrides mid-quarter—treat preview CSS as production-critical infrastructure.
Safari and WebKit caveats in 2026
WebKit applies overrides during the first available font period even when the remote file is still decoding. That is good for CLS but can slightly alter caret positioning in contenteditable demos—log an issue if your static admin templates mix editable regions with marketing fonts. Always compare stable Safari against Safari Technology Preview when Apple lands metric tweaks; STP occasionally leads stable by one minor release.
Also verify interaction with font-variation-settings on variable fonts: overrides apply to the default axis positions first. If your brand variable font ships a tall “opsz” default, reduce size-adjust before chasing per-axis fixes.
Copy-ready @font-face recipe
@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%;
}
}Replace percentages with your measured deltas. Keep WOFF2 files below 80 KB per weight when possible so decode stays under 30 ms on Apple Silicon laptops and under 55 ms on older Intel MacBook Air models still common in schools.
Decision matrix
| Scenario | font-display | Overrides | Rationale |
|---|---|---|---|
| Hero marketing headline | swap | size-adjust + ascent/descent | Brand fidelity with bounded CLS |
| Body copy on docs site | optional | Light size-adjust only | Prioritize reading stability |
| Monospace code samples | swap | Match x-height to system mono | Prevent horizontal reflow in pre |
| Localized CJK pages | swap | Test per locale; do not reuse Latin % | Metrics diverge across scripts |
Measuring lab versus field CLS
Lighthouse lab runs reward metric overrides immediately, but field CrUX data lags by 28 days. Instrument your static pages with the web-vitals library and alert when CLS exceeds 0.1 at the 75th percentile on Safari-only segments. Pair that telemetry with session replay sampling—not full capture—to spot long-tail languages where overrides were never tuned.
When budgets tighten, prioritize pages whose hero text contributes more than 35% of total CLS according to the Long Animation Frames API breakdown in Chrome DevTools; those are the URLs where overrides pay back fastest.
FAQ
Do overrides help variable fonts?
Yes, but validate each axis default; start with size-adjust before touching ascent overrides per axis.
Should I preload every weight?
No—preload only the critical weight used above the fold; additional preloads compete on bandwidth and can delay LCP images by 80 ms on 4G profiles.
What about third-party snippet fonts?
Host self-contained WOFF2 files you control; third-party CSS cannot be tuned safely for metric overrides.
Apple Silicon Mac mini rentals give you the same text rendering pipeline executives see in Safari—not a Linux headless approximation. MacHTML cloud nodes expose SSH for scripted WebPageTest agents and optional VNC when designers need to scrub filmstrips frame by frame. Idle power often sits near 12 W, so keeping a QA mini online for a two-week typography sprint costs less than shipping an untested font stack to production and rolling back during a board meeting.
Renting also tracks procurement cycles: published pricing lands near $16.9 per day instead of buying another metal box that idles after launch. When the font audit ends, stop the instance; the metric tables stay in git, the hardware does not depreciate on your books across 36 months.
Rehearse CLS-safe fonts on real macOS Safari
Rent a cloud Mac mini to validate metric overrides, font-display timing, and headline reflow with WebKit before you merge static CSS changes.