A guide to subsetting fonts

Subsetting fonts is the practice of creating a “subset” of a font – a file that contains a custom, and often a limited, collection of glyphs.

 

What’s a glyph?

A glyph is a representation of a single character. Every font has a Unicode character map that links IDs with how to display that character, using a glyph.

A single glyph takes up one space in a font’s glyph table. You can think of this like a database inside a font file, which is organised in a standardised way.

Why do subsets exist?

Subset fonts exist for a number of reasons, but two common scenarios are:

The quick guide to subsetting web fonts

Many tools exist to help you subset fonts. If you prefer working with desktop apps, and you want to explore font creation at a deeper lever, you could try FontLab (for both Mac and Windows).

You could also explore plugins for existing tools you may already use as a designer. Such as Fontself, an extension for Adobe Illustrator and Photoshop CC. I’ve used this in the past myself, and found it to be a really easy to use tool for creating OpenType fonts.

But, what if you’re not looking to become a font ninja? Thankfully, there are also many free tools online to help you subset fonts quickly and easily.

Personally, I turn to FontSquirrel and their free Webfont generator.

Subsetting fonts with FontSquirrel

It really is quick to get started. Follow these instructions and you will be on your way to lighter weight font files in a flash.

  1. Head to the Webfont generator
  2. Click the ‘Upload fonts’ button or drag a font file from your desktop there. You can upload TTF, OTF or other common font file types
  3. In the first set of options, select ‘Expert’

Now, you could leave the default expert settings and scroll to the bottom to export your newly subset font files. But, here is where I would say you get to have fun and experiment with the ‘Custom subsetting’ within Subsetting… settings!

I used this exact method to bring down the weight of a self-hosted Google font, from 139KB to 15KB.

Getting smaller font files with custom subsetting

Based on your website’s language, and that of its users, you might only require a very small number of glyphs. For example, the basics of a set of glyphs for an English speaking audience. For this instance, you could choose: uppercase, lowercase, numbers if necessary, and punctuation. Exporting using this custom subset is very likely to yield a lower-weight font file than before.

Recently, I used this exact method to bring down the weight of a self-hosted Google font, from 139KB to 15KB. That was for one file of a single weight of the Raleway font.

Using the optimal font format

If you followed the above guide, you will have noticed the expert level options default to using WOFF and WOFF2 file formats. This is because both WOFF and WOFF2 can be compressed at a higher level than other formats like TTF or OTF. They are also widely supported, so they can be used across all browsers. I would highly suggest sticking with those two formats as you add the fonts to your website.

Loading web fonts for the best page load performance

I’m hoping you will now have some lovely optimised versions of your font files. Now you need to get them onto your website. I have created a guide specifically for this purpose. Check out my guide how to load web fonts for the best page load performance in the resources.

Concluding

This guide can help you reduce the weight of individual font files by subsetting them, which can improve page load performance. But what about other options?

What if you need multiple weights of one font, but don’t want to load lots of individual files. Well, you could try reducing the weight of your typography with variable fonts or opt for using system fonts alongside a reduced number of custom web fonts. Always ask yourself, or your designer, do you really need that custom webfont?

If you’re not sure which font foundry allows subsetting, as some don’t, you can find a good list of subset supporting foundries here on subsetting.xyz.



What to read next

More from our resources, blogs and case studies

Find this resource useful?

I hope so. I want everyone to be able to benefit from articles like this one. That is why I'm kindly asking for your support.

These resources take time to research and write. The site is run by one person, with occasional volunteer contributors in spare time. Please consider supporting the project if you can.

Plant a tree with Ecologi or Donate £3