Websites today are bloated. Developers have heard the complaints: why does a website need to weigh megabytes in order to display a few kilobytes worth of text?

There are many reasons for the bloat: images, videos, JavaScript frameworks, ads, and analytics. Another one that gets overlooked is custom fonts.

📝 Optimizing this blog #

This blog uses a third-party theme (tomfran/typo), which automatically loads some custom fonts. I checked how the site would look if I used local / system-default fonts, and I didn’t notice much of a difference! So there’s not much point in using the custom fonts.

I removed the custom fonts, and looking at the developer console’s Network tab, the results are promising:

I also optimized the favicon PNG files as well as my profile picture on the home page, leading to a cool 36 kB landing page, down from 400 kB!

🌐 Optimizing the web #

But what about other websites? Do users have control in disabling custom fonts? Yes!

We can disable websites from loading custom fonts in Firefox by modifying the following setting in about:config:

gfx.downloadable_fonts.enabled = false

The performance boost while navigating the web is definitely noticeable, and it’s also nice not encountering sites with unreadable text. Plus this will get rid of the “flash of unstyled text” (FOUT) phenomenon where text on the page will change fonts and sizes, causing annoying layout shifts.

One caveat is that this will disable icon fonts, so some UIs may become more difficult to use. This is especially true when sites use icons with no text labels. So far I haven’t encountered much annoyance though; most of the time hovering over the icon will show a tooltip, other times the icon’s purpose will be obvious (such as a play button in a video player). Still, if this is an issue for you, the uBlock Origin extension does have the ability to block remote fonts on a site-by-site basis!

Thoughts or comments on this post? Send me an email at greg@greglang.me!