The three lines of CSS that saved me 40kb and might do the same for you – Welcome Home.

The three lines of CSS that saved me 40kb and might do the same for you

10 Jun, 2026

Custom fonts are a boon for usability and they can give your blog that extra bit<br>of oomf. But fonts can really hurt performance if you're not heavy. A single<br>font can take up 40kb or more.1 That's not a ton in a world of 3MB<br>SPAs, but they're very much on the critical path and need to be loaded as<br>quickly as possible to avoid your page jumping around.

So cutting out as much font bandwidth as possible can make a huge difference.

One of the key parts of bearblog's personality is its logo:<br>ʕ•ᴥ•ʔ

Here's the thing though: those 5 characters aren't in the base latin character<br>set. If you're using fonts from bunny or<br>staticdelivr,2 the fonts may very<br>well be broken down into a latin font-face and a latin-ext font-face using the<br>unicode-range<br>property,<br>so those 5 characters result in downloading the latin-ext font.

Fortunately, the fix is very simple because Herman attached a class to that set<br>of characters. So all you have to do is paste the following 3 lines into your<br>CSS theme.

.bear {<br>font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;

This uses the Monospace Code font stack from<br>Modern Font Stacks. Because those fonts are<br>built into everyone's browser, there's no added font to download.

And even if this doesn't reduce your page weight, doesn't the bear look a bit<br>better in monospace? I think so.

Your milage may vary. It depends in large part on whether you're using<br>static or variable fonts and how you're using fonts, weights, and italics.↩

Because you're not using Google fonts, right?↩

#css

#performance