The Potter's First Unwedged Clay: On the Hidden Air Pockets of an Unoptimized Font
There is a quiet, almost meditative process in pottery known as wedging. Before a potter ever touches a wheel, they must knead their clay. This isn't just to mix it; it's to work out the air pockets, the tiny voids that, if left trapped, will expand in the kiln's heat and shatter the finished piece from within. The work is foundational, unseen in the final product, but catastrophic if skipped.
We have a similar, often overlooked step in our front-end craft: font optimization. We carefully select our typefaces, load them via a modern CDN, and pat ourselves on the back for a job well done. But like the unwedged clay, a font file can be full of invisible pockets—characters, glyphs, and language sets our project will never use. These unused portions are dead weight, bloating our network requests and delaying that critical first render. The browser must download this entire, often massive, file before it can paint a single letter of our carefully chosen prose. The piece looks solid, but its foundation is fragile.
The Practical Wedge: Subsetting Your Fonts
The technique to remedy this is called subsetting. It is the process of carving away the unneeded parts of a font file, leaving only the specific glyphs your website actually requires. The performance gain is not incremental; it is often transformative. I recently worked on a site using a beautiful serif webfont. The original WOFF2 file was a respectable but hefty 256KB. After a simple subset to basic Latin characters, punctuation, and the few special symbols we used, the new file was a mere 28KB. We excised nearly 90% of the weight without losing a single visible character. The font painted noticeably faster, a direct and tangible win.
How do you do it? While many font services offer basic subsetting controls in their dashboards, the most precise and powerful method is to use a command-line tool like `glyphhanger`. It can spider your site, discover exactly which characters are in use, and generate a perfectly tailored subset. The process is simple: you run a command pointing at your local development URL, and it outputs a pristine, minimal font file. It feels like a secret superpower.
This act of removal is a profound shift in mindset. We are so often trained to add—another library, another script, another asset. But the true craftsperson knows that the most critical work often involves subtraction. It is the careful, deliberate removal of the non-essential that reveals the strength and integrity of the final form. By wedging our fonts, we don't just make them faster; we make them stronger, more resilient, and truly fit for purpose. We ensure our design won't fracture under the heat of a slow network.
Notes & further reading
A few pages I came back to while writing this: