Profile picture of Dan Poulton

Subsetting a font file with glyphhanger

Font files can be pretty big and negatively impact your website’s loading speed.

You’ll find fonts come in different file types:

  • TrueType (.ttf) – largest
  • Web Open Font Format (.woff) – smaller
  • Web Open Font Format 2 (.woff2) – smallest

So if you create and use a .woff2 file, it’ll load quicker because the same number of glyphs you’d find in a .woff or .ttf are compressed into a smaller file.

But you can go one further. You can use a .woff2 file with a smaller number of glyphs.

A glyph is a letter, number, punctuation mark or special character – anything you could type – including spaces.

Think about how many glyphs you actually use on your website.

Now, think about how many glyphs might be included within your chosen web font. Some include Cyrillic and Greek characters in addition to the Latin characters we use in English.

Is there much Greek on your website?

I thought not! So here’s how to reduce the number of glyphs in your font file.

It works with separate font files for each weight/italics and for variable fonts – as we’re aiming to improve loading speed – variable is the way to go.

A variable font can contain all the variations in your font – most commonly all the different font weights used for light and bold text.

For website loading speed, the fewer the files and the smaller each file the better.

Installing glyphhanger

First you need to install the NPM package.

npm install -g glyphhanger

Or, as a dev dependency for the current project only:

npm install -d glyphhanger

What's npm?

NPM stands for Node Package Manager. It’s a software repository and all the software is written in JavaScript and it runs locally on your computer.

You’ll need to download and install Node.js to be able to download and use NPM packages.

Running the command

We can now run commands via the terminal to subset a font.

Subsetting just means returning a new font file containing only our specified glyphs.

glyphhanger --subset=TTF_FILE --formats=woff2 --whitelist=ABCD

Replace TTF_FILE with a relative path to your TTF file. I recommend running the command from the same folder as the file to make this easier for yourself.

Next, take a look at whitelist. Here you can specify all the characters you want to include in your new subset.

It doesn’t just accept letters, you can enter unicode ranges. This means you could specify the whole of basic Latin by using the value: U+20-U+7F.

And that’s it!

You’ll see the subsetted file output in the same directory and it’ll be called the name of your .ttf file with -subset.woff2 at the end.

Share