The Ice Carver's Wasted Core: On the Unchipped Mass of an Unused Font Face

I’ve always been fascinated by the parallels between traditional crafts and our work in the browser. Lately, I've been thinking about the ice carver, who starts with a massive, perfect block, clear and cold. Their art is one of reduction, of chipping away everything that isn’t the swan, the flower, the intricate pattern. They must be precise, wasteful in a productive sense, removing the excess to reveal the form. The wasted shavings melt away, leaving only the intended sculpture.

Too often, our stylesheets are like a block of ice that we’ve only partially carved. We load a complete, multi-weight font family—Regular, Italic, Bold, Bold Italic, Black, Light, you name it—only to use two of them on the page. The rest of that hefty font file is the un-chipped core of the block, a dead weight that our visitors are forced to download, parse, and store in cache for no reason. It’s a silent tax on performance, paid for with milliseconds of rendering time and kilobytes of precious bandwidth, especially on slower networks. The browser must load this entire block before it can begin to paint text effectively, leaving the user staring at blank spaces or, worse, experiencing a jarring flash of unstyled text (FOUT) as the final, used font kicks in.

The technique, then, is simple but profoundly effective: granular `@font-face` declaration. Instead of relying on a monolithic link from Google Fonts or a single kit from a foundry that serves the whole family, we must become carvers. We identify the exact glyphs we need—the specific weights and styles—and define them individually. This isn't about subsetting the font's character set (a valuable, deeper cut), but about a higher-level, architectural precision.

Here’s the shift. A typical approach might be a single, vague declaration for a whole family. But the carver’s method is to define each used variant with surgical specificity. For a heading that uses ‘Bold 700’ and body text that uses ‘Regular 400’, we create two separate `@font-face` rules. Each rule points directly to the font file for that specific weight. The `font-weight` property within the rule is crucial; it must be set to the precise value (e.g., `700`) and not to a range like `100 900`. This tells the browser exactly which file to fetch for each stylistic need, preventing it from downloading a heavier file that contains multiple weights in a desperate attempt to find a match.

The result is a lighter, more focused network request. The browser no longer lugs the entire uncarved block of ice to the party; it brings only the sleek, finished pieces of the sculpture. This practice dovetails beautifully with font-display strategies, as the smaller, targeted files can swap in more quickly. It’s a practice of intentionality, of declaring precisely what we need and wasting nothing. By carving away the unused masses from our font declarations, we don't just shave off load time. We honor the craft of delivering an experience that is as lean, purposeful, and swift as the finest sculpture.

Notes & further reading

A few pages I came back to while writing this: