7  Fonts & Typography

It has recently come to my attention (courtesy of Lighthouse) that my love for fonts is at odds with the performance of my websites.

There are lots of ways to optimize fonts for faster websites, but I’ve basically decided to just implement two of them:

• using the modern Web Open Font Format, WOFF 2.0 (which covers about 95% of users);
• and subsetting the glyphs I include in my font files.

To learn more about optimizing web fonts for vitals independent of tools, check out Best practices for fonts (Hempenius and Pollard 2022).

7.1 Transfonter

Transfonter is an online web-font generator (Font Squirrel is another one you may have heard of). It allows me to convert font files (e.g. TTF, OTF, WOFF2) into my desired format to use in a stylesheet.

For me, this means base64 encoding a subset of a font in WOFF2 format. What I like specifically about transfonter is that it allows you to specify the range of characters that you would like to include as Unicode code point ranges. This plays very nicely with a command-line tool I’ve been using, glyphhanger, which (among other things) can crawl a webpage to find the glyphs used, the results of which are returned to you as Unicode ranges.¹

Using base64 encoding is bad for performance, but is required by the license for my font of choice.

Transfonter also allows you to specify the font-display property for your generated font-faces, which determines how long a font face will block your page from loading.

7.2 Glyphhanger

The aforementioned glyphhanger is a “web font utility belt” that can: subset web fonts, show you Unicode ranges used on a web site, and (a combo of the two) automatically subset web fonts using the Unicode ranges found on a web site.

Essentially, I use it to find out what glyphs I am using on a web site for a given font family, and then subset the glyphs for the web-font file I use on said site.

For a full accounting of how to set up glyphhanger and get going, check out How I set up Glyphhanger on macOS for optimizing and converting font files for the Web by Sara Soueidan².

The usage section of the glyphhanger documentation is quite straightforward. So, I won’t repeat it here.

Personally, I feed glyphhanger’s default output format, Unicode code points (as opposed to the characters themselves), for each font family into Transfonter. But, if you don’t need base64-encoding, you can output an @font-face block with CSS and serve that directly alongside your subset font files.

Hempenius, Katie, and Barry Pollard. 2022. “Best Practices for Fonts.” Web.dev. https://web.dev/articles/font-best-practices.

---

1. You can subset fonts directly with glyphhanger, including subsetting to the glyphs at a URL. Glyphhanger also lets you output an @font-face block with CSS. However, it doesn’t have base64-encoding features, which I need due to the fact that I use some non-open-source fonts with licenses that require me to use that format for web fonts.

2. Though glyphhanger itself is available on npm, its subsetting feature depends on FontTools, which requires a recent version of Python and pip for installation. So, if you don’t already have the tooling in place, the process can be a bit involved.