The Mason's Mortar: On the Crucial Fill of the font-display Swap

We lay our pages like masons lay bricks. We carefully choose our type, our 'bricks' of content, and stack them with intention. But what holds them together? What prevents the entire structure from shifting and crumbling as a new, heavier decorative stone is lowered into place? This is the role of the mortar. And in our world, this crucial fill is the often-overlooked `font-display: swap`.

It is a small declaration, a single line in a stylesheet, yet it dictates the entire character of a page's initial load. Without it, we subject our visitors to the dreaded FOIT—the Flash of Invisible Text. The browser, a too-zealous mason, receives our beautiful custom bricks but refuses to lay a single one until the entire decorative cornice—the web font—has arrived. The user is left staring at a promising but empty plot of land.

Enabling swap is the act of mixing the mortar. It instructs the browser to use a fallback font immediately. It says, 'Lay the bricks with what you have, we will adjust the decor later.' The text is immediately readable. Then, once the custom font loads, the browser seamlessly swaps it in. This is the FOFT—the Flash of Faux Text. The structure stands complete and functional from the very first moment, even as its final aesthetic is being applied.

But like any craft, this technique requires a thoughtful hand. The swap is not a cure-all. An unconsidered fallback can cause a jarring layout shift, as a skinny system font is replaced by a wider serif, pushing words onto new lines and buttons out of reach. The mortar must be matched to the brick. We must tune our fallbacks, adjusting their `font-size`, `line-height`, and `letter-spacing` to closely mirror our custom type. We must strive for a graceful swap, where the change is a subtle refinement, not a disruptive overhaul.

This small habit, this act of considering the transition, is what separates a functional page from a crafted one. It is the acknowledgement that the user's time and experience are our primary materials. We are not just stacking bricks; we are building a stable, accessible, and graceful structure from the ground up, ensuring that even while the final ornaments are in transit, the walls are solid and the door is open.

Notes & further reading

A few pages I came back to while writing this: