menu

It’s Dangerous to Go Stallone. Take Glyphhanger

I’m gonna tell you a secret. A well guarded and little known secret—whispered about in hallway tracks of web performance conferences around the world. A web font performance trick that will take your font loading to the next level.

Okay, fine–I’ll concede. This isn’t as groundbreaking or as secretive as I originally claimed. But it is helpful!

Practically speaking, making web fonts as small as possible is not always straightforward. The most straightforward optimization is to use compressed web font files, specifically the WOFF2 format but also its predecessor WOFF for compatibility.

A less well known, but very useful option—and the one I’d like to discuss in-depth today—is removing potentially unnecessary characters from a font file. This is a process called subsetting.

Let’s start with the most popular font on Google Fonts, Roboto. For experiment’s sake (although you can download it from Google Fonts) let’s download an unoptimized copy straight from the source, the Roboto GitHub repository.

Opening up the roboto-android.zip file, we can find Roboto-Regular.ttf—a completely unoptimized desktop font version of Roboto. It weighs in at 306 KB and includes 3,359 distinct glyphs (according to Font Drop). That’s a hefty font. Not a hefty weight—we’re not using the bold version of Roboto—I only mean that the file size is large. Was that clear? Hopefully. I think you get what I mean.

Font Drop also reports that Roboto contains support for over 40 languages:

This works great for a single page on our site. But to be fair, we want to use one set of web font files that works with all of the pages on our site—not just for the home page. There are a couple of ways to make this work:

Pass in a whitelist

Use the --whitelist option to pass in a Unicode range or a list of characters you’d like to include by default in addition to any URLs that get interpreted. At time of writing, glyphhanger (v3.0) also includes shortcuts for --US_ASCII and --LATIN.

Let’s say, instead of Roboto, we have a specific monospace web font we’d like to use in our code blocks and syntax highlighted code on our site. The Unicode range for monospace code content may be very different from the characters used for other content on our site. glyphhanger can help here too. We can pass in a comma separated list of one or more font-family names to fetch only the content in nodes using those font-family values.

glyphhanger will even make your @font-face blocks in CSS for you. Using --css will output a @font-face block to the console. Of course, it’ll add the unicode-range, but it’ll also add the right src with the correct file names returned from --subset. If you’re using --family, it’ll add a font-family value too.

glyphhanger is a useful tool when working with web fonts—it can help optimize your font files very quickly. But don’t get too hasty. Take proper care to perform due diligence before subsetting:

Make sure subsetting agrees with the licensing restrictions on the font file.

Don’t be too aggressive with your subset. If you’re using web fonts for user generated content or content that is likely to change in the future, your Unicode range should be broad enough to accommodate this.

Download glyphhanger and give it a try! We welcome any and all feedback at our Issue Tracker. What else would you like to do with your web fonts?