Two changes this release, both of the kind that only matter at one specific moment — which is precisely why they sat on the list for months. Nobody prioritises the print stylesheet until the day someone prints the page and it comes out as four sheets of navy.
The font swap
Between the fallback face rendering and the web font arriving, Arial is shorter and wider than Inter. Every line box changes height and every heading rewraps at the moment of the swap — that is layout shift, and it is where a page's CLS score comes from.
The Fonts module now declares three fallback faces: Arial and Courier New with the real fonts'
ascent, descent and average width forced onto them via ascent-override,
descent-override and size-adjust. The browser lays the page out at the right
line height immediately, and the real font lands in a box that already fits.
Every number was read out of the shipped woff2 files with fontTools rather than copied from a
blog post. That mattered: commonly published values for Inter put size-adjust around
107%; the measured ratio for this subset is 122%.
The print stylesheet was one line hiding four elements. It now forces black on white, drops navigation and chrome, opens every tab panel and accordion so nothing hides behind a control that cannot be clicked on paper, prints the address after external links, and sets page-break rules so headings are not stranded and tables are not split across two sheets.
Update: the number we never checked
The whole argument for metric-matched fallbacks is that the swap from fallback to web font should not move anything, which shows up as cumulative layout shift. We shipped that argument without measuring it. It took until the browser suite ran to put a figure on it: on a throttled phone profile, with a cold cache and the fonts arriving late, every page tested reports a CLS of 0.0000, and largest contentful paint lands under 1.2 seconds.
The measurement is worth describing, because "we measured CLS" can mean very little. Layout
shift only counts if it happens after first paint and without recent user input, so measuring it
on a fast local connection with a warm cache reports zero for a page that shifts badly in the
field. Ours throttles the connection to roughly 400kbps with 150ms of latency, watches
layout-shift entries through a PerformanceObserver from before navigation, waits, then
scrolls, because scroll-triggered content is where the second wave of shift usually comes from.
One honest caveat: this is the site's own pages on the site's own fonts. If you swap the
display face for something whose metrics differ from the fallback you declare, you inherit a
shift the framework cannot prevent for you — which is why the font file carries its measured
size-adjust, ascent-override and descent-override values in
a comment rather than leaving them as magic numbers.
What this post does not cover
- Font licensing, which differs per face and is yours to check.
- Variable fonts, which would change the fallback maths described here.
Checked against metric-matched fallback, cumulative layout shift, print stylesheet. Figures are measured from the build they describe.
What this doesn’t cover
The fallbacks are matched to the faces we ship. Swap the display face for your own and the overrides are wrong until you regenerate them. The print stylesheet also cannot know which of your own blocks are decoration, so it drops the framework’s chrome and leaves yours alone. Neither piece has been checked on a real printer at a size other than A4.
Sources: MDN on size-adjust and web.dev on cumulative layout shift. The CLS and LCP figures are measured in Chromium on a throttled phone profile, not estimated. No code blocks in this post.