The Potter's First Unvented Kiln: On the Subtle Cracks of a Hasty Font Swap
There is a particular stillness to autumn afternoons that I cherish. The frantic energy of summer has passed, and a more deliberate, reflective pace sets in. It’s a time for preparation, for battening down the hatches before the quiet of winter. As I watch the light change and feel the air grow crisp, my mind turns, as it often does, to the work. This seasonal shift towards introspection and readiness mirrors a subtle but crucial aspect of our craft: the management of web fonts.
We speak often of the performance cost of fonts—the FOIT, the FOUT, the dreaded layout shift. We preload, we set `font-display: swap;`, and we move on, checking a box on our performance audit. This is akin to a potter building a vessel with care, applying the glaze with a skilled hand, but then, in a rush to see the finished product, firing the kiln without properly venting it. The result might look fine at a glance. The shape is good, the colour is vibrant. But under the surface, microscopic stresses have formed. The piece is more fragile than it appears.
Using `font-display: swap` is that unvented kiln. It solves the immediate, jarring problem of invisible text, but it introduces a different kind of friction. The user begins to read in a system font, and then—sometimes milliseconds later, sometimes whole seconds—the page jolts as the intended typeface violently elbows its way onto the stage. The content is the same, but the experience is fractured. The reader’s focus, that delicate thread of concentration, is severed. In our haste to eliminate one perceived failure, we’ve created a different, more insidious one.
The Season of Deliberate Transitions
Autumn doesn’t switch from green to gold in an instant. The change is a gradual, beautiful transition. Our font loading should strive for the same grace. This is the season to question our quick fixes. Perhaps the answer isn’t a simple swap, but a more considered approach. It’s in the subtle art of `font-display: optional`, where we acknowledge that the initial page load is a sacred contract and that sometimes, consistency is a greater luxury than brand expression. It’s in the meticulous use of `size-adjust` and other modern descriptors in the `@font-face` rule to minimize the shift even when a swap is unavoidable.
This isn’t about abandoning our tools, but about using them with the wisdom the season invites. It’s about understanding that performance is not just a metric of speed, but a measure of respect for the user’s cognitive flow. A page that loads quickly but stutters as it presents itself is like a hurried greeting; it gets the job done, but lacks warmth and assurance. As the year winds down and we prepare for the inward turn of winter, let our work embody that same thoughtful preparation. Let’s build experiences that aren’t just fast, but are stable and serene from the very first word to the last, allowing our readers to settle in without disturbance, much like the quiet, dependable peace of an autumn afternoon.
Notes & further reading
A few pages I came back to while writing this: