The Baker's First Proofed Loaf: On the Rising Expectation of a Font Face Display Swap
There is a particular, almost sacred tension in a baker's kitchen when a loaf is proofing. The dough is set aside, covered by a cloth, visibly doing nothing. Yet beneath that linen shroud, a silent, inevitable transformation is underway. The yeast is alive, working its magic, and the baker knows that what emerges will be fundamentally different from what went in. We wait with bated breath, not for an unknown, but for a known change that is still somehow full of promise.
This is the precise feeling, the patient anxiety, we invoke upon our visitors with every custom font we serve. We write our `@font-face` rule, we point to our beautiful, meticulously chosen typeface, and we set the dough of our page to proof. The browser, like a faithful apprentice, fetches the font. But what does the visitor see in that interim? They see the fallback.
The text renders immediately in System Font or perhaps a more generic serif—the unbaked flour and water of our typographic intent. It's legible, but it is not our design. It is the raw ingredient. Then, the font loads. The cloth is pulled back. And in a sudden, often jarring flash, the text reflows, shifts, and snaps into its final, intended form. We call this moment a Flash of Unstyled Text, but that feels like a misnomer. It is not unstyled; it is a flash of the wrong style, a brief glimpse of an alternative reality we never meant to present.
The `font-display` swap is our instruction to the browser to show this proofing loaf. It says, "Show the text immediately, no matter how, and swap in the real font when it's ready." It is a trade-off we make, prioritizing perceived performance over stability. We accept the layout shift for the sake of getting words in front of eyes. It is a practical, often necessary choice, much like a baker needing to get bread to the table.
But a good baker also knows that the proofing time can be managed. The environment can be optimized. We, as front-end crafters, have similar tools. Perhaps we can preload the font, warming the oven beforehand. Maybe we can fine-tune our fallback stack with font-family descriptors like `size-adjust` and `ascent-override` to make the swap less of a seismic shift and more of a gentle settling. We can attempt to make the fallback font occupy the same visual space, to minimize the jarring reflow.
We are, in essence, trying to shorten the proofing time and control the rise, so that when the beautiful, final loaf is revealed, it does not break the table it sits upon. We aim for a moment where the swap feels less like a disruption and more like the satisfying completion of a process the user always knew was happening—a quiet, expected fulfillment of a promise made the moment the first word appeared on the screen.
Notes & further reading
A few pages I came back to while writing this: