The Baker's First Proof: On the Rising Readiness of a Font-Face Observer

Every morning, a baker learns everything they need to know from a small, fermented piece of dough. This ‘proof’ is a test of vitality, a signal that the yeast is alive, active, and ready for the greater work to come. It is a small, quiet ritual that prevents the catastrophe of a flat, lifeless loaf. In our own craft, we have a similar, often overlooked test for vitality. We call it the FontFaceObserver.

It is a tiny script, a mere few lines of code, but its purpose is as critical as the baker’s morning ritual. We pour effort into selecting the perfect typeface, a font that carries the tone and texture of our words. We load it with a `@font-face` declaration, confident it will render beautifully. But like yeast in a cold kitchen, a font can be present yet inactive, loaded but not yet ready to render. The result is not a flat loaf, but FOIT—the Flash of Invisible Text. A user sees a blank space where content should be, a silent, frustrating pause where meaning is withheld.

The FontFaceObserver is our proof. It does not load the font; that work is already done. Instead, it performs a simple, elegant check. It asks, quietly and without fanfare, “Are you ready?” It waits for the font to become fully operational, for the glyphs to be parsed and prepared for the canvas of the screen. Only when it receives this silent confirmation does it add a single class to the document—perhaps `.fonts-loaded`—a signal that the transformation can begin.

This is where the magic happens. That tiny class triggers a stylesheet change, swapping out the fallback font for the intended one. The transition is where the craft shines. A well-executed switch might use a subtle `font-size-adjust` to maintain the x-height, or a matching `letter-spacing` to preserve the rhythm of the text. The user experiences not a jarring pop from invisible to visible, but a graceful refinement, a sharpening of focus, as if the lens on a camera were being turned to its final, precise setting. The text was always there, readable in its system font guise; now it is simply dressed in its intended finery.

This small act of observation is a lesson in patience and preparedness. It acknowledges that the network gives us assets, but it does not guarantee their readiness for duty. It is a humble, respectful nod to the fact that every component on our page has its own lifecycle, its own moment of becoming. By observing this moment, we move from simply building pages to orchestrating experiences. We ensure that the first impression is not one of lack, but of considered delivery. We prove our dough, and in doing so, we promise a good loaf.

Notes & further reading

A few pages I came back to while writing this: