The Miller's First Un-sifted Grain: On the Hidden Grit of an Overzealous `font-display`
There is a piece of advice, repeated so often it has become a sort of performance incantation, that goes something like this: "Always use `font-display: swap` for your web fonts. It’s the fastest way to get text on the screen." In the frantic race to optimize Core Web Vitals, particularly Largest Contentful Paint (LCP), this wisdom is treated as gospel. Swap the font, show the text, win the metric. It’s a clean, logical solution. But like any rule applied without nuance, it grinds away at the finer points of the user’s experience, leaving a residue of friction that the raw numbers never capture.
The promise of `swap` is immediate text rendering. The browser, upon encountering a custom font definition, is instructed not to wait. It paints the text immediately using a fallback system font, and then—when the custom font finally loads—it performs a ‘swap’. The page appears to load quickly, and the LCP timer stops on that initial, albeit generic, text. From a performance auditor’s spreadsheet, it’s a clear victory. But for the person actually reading the page, the moment of the swap can be a jarring, disruptive event.
This is the hidden grit. The text shifts. Serifs suddenly appear where there were none. A narrow, elegant typeface might replace a wider, more common one, causing words to reflow. A line of text that fit comfortably on a single line might awkwardly break into two, or vice-versa. This is more than a visual hiccup; it’s a break in the reader’s focus. It’s the typographic equivalent of someone swapping the book you’re reading for a different edition mid-sentence. The content is the same, but the vessel has changed, and you are momentarily, subtly, disoriented.
The Illusion of a Free Lunch
The appeal of `font-display: swap` is that it feels like a free performance lunch. We get the perceived speed of a fast LCP without the perceived penalty of a flash of unstyled text (FOUT). But this is an illusion. We haven’t eliminated the penalty; we have merely changed its character. Instead of a flash of *unstyled* text, we have created a flash of *faux-styled* text. The initial rendering is a lie, a placeholder that actively misrepresents the final design. The ensuing swap is the moment of truth, and for sites with prominent, carefully crafted typography, that truth can be a violent one.
This critique is not a call to abandon `font-display: swap` entirely. In many contexts, particularly for body text where the fallback font is chosen to be a near-visual match, it remains a powerful tool. The problem lies in its status as a default, a rule applied without consideration for the visual consequence. The alternative, `font-display: optional`, is often dismissed as too conservative because it can lead to the custom font not being used at all on slower connections. Yet, its philosophy is arguably more honest: it prioritizes a stable, consistent reading experience from the very first paint over the guaranteed application of a specific typeface.
Perhaps the most refined approach is one that acknowledges there is no single correct answer. It requires the craft of mindful font management: pairing custom fonts with visually-similar system fallbacks, using `font-display: block` for critical branding elements to ensure they paint correctly, and reserving `swap` only for situations where the reflow is minimal. It’s the work of sifting the grain—separating the instances where immediate text is genuinely beneficial from those where it introduces a subtle but real degradation. The fastest text is not the first text to appear, but the first text to appear that doesn’t later betray the reader’s trust.
Notes & further reading
A few pages I came back to while writing this: