Published at
Updated at
Reading time
2min

On my font optimization journey, I've learned that subsetting is an invaluable approach to reducing font file sizes. I've been able to cut down Roboto's size from 785kB to 200kB by subsetting it to ASCII characters. And when going the extreme way, I could even bring it down to 58kB by aggressively limiting the included characters.

Article component visualizing that the loaded font only includes the characters used.

But could one squeeze out even more bytes of the Roboto font?

When you inspect Roboto with Wakamai Fondue, you'll discover that it ships 13(!) variable font axes.

13 sliders showing all of Roboto's variable font axes.

That's great, but I wonder if you need all these variable configuration parameters in production and argue that a good design defines only a few font variations. 13 configurable axes shouldn't be needed at all times.

Thanks to Tobias Kunish, I learned you can also remove axes with some tooling! Does the removal of font axes affect the font size? Let's find out!

Slice is an open-source application to create custom font design spaces from variable fonts. Unfortunately, I'm not enough font nerd to understand all of Slice's functionality, but what I get is that you can inspect a font's axes and limit their ranges or define a static value for each.

Slices app configured to set fixed values for particular font axes.

For example, if you're not interested in including all the variations of the parametric figure height (YTFI), set a value and drop the axis from the font entirely.

To test things out, I kept the opsz, wght, GRAD, wdth and slnt axis untouched and set a fixed value for the eight other axes to remove them from my local Roboto font.

FontSize with 13 axesSize with 5 axes
Roboto (all characters & glyphs)784kB710kB
Roboto (Latin)322kB292kB
Roboto (ASCII)202kB182kB
Roboto (only a few characters)58kB52kB

And indeed, removing font axes resulted in more saved bytes!

So, if you're on the journey of optimizing your fonts, subsetting will give you massive results, but if you want to go the extra mile, you can also shave off some more bytes by limiting font axis range values or removing axes entirely. Happy optimizing!

If you enjoyed this article...

Join 5.5k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles