When it comes to performance, smaller is almost always better—and fonts are no exception. The smaller they are, the faster they’ll load, and the less impact they’ll have on performance.

So how do you keep your font footprint as small as possible?

It’s simple: Only use what you need.

This principle applies in two ways. 1) First, only use the fonts you actually need. For instance, do you really need 5 different custom fonts for this page? Or will one or two suffice? Trimming down the number of fonts that get loaded can go a long way. But once you’ve whittled down the number of font files, you can go even further in applying this principle.

  1. You can also only load the glyphs you need. Each font can contain hundreds to thousands of glyphs (a glyph is an individual character or symbol). But often, these glyphs may be for languages or character sets your website will never need. So instead of using the default font that includes support for all these languages, you can go a step further and trim down the font file to only use the sets of glyphs (characters) you specifiy. This technique is called subsetting.

Glyphhanger and Subsetting

So how do you determine which glyphs you actually need? And once that’s done, how do you subset a font file to support only these glyphs?

Filament has created and released a flexible tool called Glyphhanger than can help with both of these tasks. It allows you crawl a page or pages and identify which unicode ranges are being used there. It also provides an option to use this information to generate a subset of a font based on these ranges. The following is a general overview of the tool.

How to use

Installation

First, you can use npm to install it:

$ npm install -g glyphhanger

Identifying unicode ranges

Once it’s installed, you can pass in a URL for it to look at. It will return a list of the unicode ranges it finds in the content of the URL you provide.

$ glyphhanger https://afasterweb.com

U+20,U+27-29,U+2C-2E,U+30-32,U+35-39,U+3F,U+41-4A,U+4D-50,U+52-54,U+57,U+61-7A,U+A9,U+2019,U+2022,U+2192

Now, a single page may be of some help, but even more helpful is checking multiple pages at a time. The tool allows you to manually pass in multiple URLs, as well as giving you the option to have it to spider the links on the page, checking the content of those pages as well.

$ glyphhanger https://afasterweb.com --spider --spider-limit=5

U+A,U+20,U+22,U+25,U+27-29,U+2C-3F,U+41-50,U+52-59,U+5F,U+61-7D,U+A9,U+2013,U+2018,U+2019,U+201C,U+201D,U+2022,U+2192

Subsetting a font

Glyphhanger also allows you to subset a given font by using --subset.

$ glyphhanger https://afasterweb.com --subset gpc-book.ttf

U+20,U+27-29,U+2C-2E,U+30-32,U+35-39,U+3F,U+41-4A,U+4D-50,U+52-54,U+57,U+61-7A,U+A9,U+2019,U+2022,U+2192
Writing CSS file: gpc-book.css
Subsetting gpc-book.ttf to gpc-book-subset.ttf (was 22.88 KB, now 9.57 KB)
Subsetting gpc-book.ttf to gpc-book-subset.zopfli.woff (was 22.88 KB, now 5.81 KB)
Subsetting gpc-book.ttf to gpc-book-subset.woff2 (was 22.88 KB, now 4.41 KB)

NOTE: The subsetting feature makes use of the pyftsubset utility, which will also need to be installed on your system in order to work. Please check out the ‘Installing pyftsubset’ section of the Glyphhanger README for more details.

You can also pass in a predesignated whitelist of unicode characters using the --whitelist flag. This could be done in place of, or addition to, the results of crawling a URL. (You can also pass in --formats to designate which kinds of files you want generated. )

$ glyphhanger --whitelist="U+20-7E" --subset gpc-book.ttf --formats=woff2

U+20-7E
Subsetting gpc-book.ttf to gpc-book-subset.woff2 (was 22.88 KB, now 5.95 KB)
Writing CSS file: gpc-book.css

A Helpful Tool

Whether it be identifying which glyphs are actually being used on a site, or generating a subsetted font file that only contains these glyphs, Glyphhanger is a useful tool. Filament has some great information about it in the resources listed below, which go into much greater depth than this overview. For anyone interested in optimizing web fonts, Glyphhanger is well worth checking out.

Resources