Optimising web fonts - Part 2
I've been mucking around with Cloudflare a lot recently. Working with page rules to help speed up data requests. Learning more about the new Cloudflare Pages, which I'm hoping to move my personal website to shortly. And building out an API with Cloudflare Workers. You might say my head is in the clouds. I'll show myself out.
If you're still around after that introduction, then let's continue our look at optimising web fonts. Often times when trying to make a website load faster you'll find yourself asking two questions:
- Can I reduce the file size of assets?
- Can I load important assets earlier?
This week, with web fonts in mind, we'll answer the first of these questions. We'll get to the second question in the next issue.
Reducing the bytes that need to be transmitted is one way to improve the performance of a website. So how can we do that with web fonts? There are two techniques we can use depending on what our font license allows.
- Using a modern format
- Removing unused characters (subsetting)
These can be used either in isolation or combined.
Before I go further, it's worth considering whether a web font is needed at all. As we touched on in the first part of this series, you can do a lot with system fonts.
Using a modern font format
As with images, several formats can be used to display fonts on the web. Common font formats you're likely to see around the web are:
- TrueType font (TTF) - A common format for Windows & Mac operating systems. It's got widespread browser support going all the way back to Internet Explorer 9.
- Embedded Open Type (EOT) - A format created by Microsoft that has very little support. Works on Internet Explorer only.
- Web Open Font Format (WOFF/WOFF2) - An efficiently compressed format created specifically for the web. WOFF has very wide support (including IE9), while WOFF2 is supported by all modern browsers.
The most modern, and best optimised, of the list above is WOFF2. It's very well supported across modern browsers, and in 2021 there's really no reason not to be using it on your website. If you need support for older browsers you can still serve WOFF2 and provide WOFF & TTF as fallbacks.
Creating WOFF2 font files
Converting font files is a fairly simple process. There are several online converters that can do the job for you:
With all of them, you can upload multiple TTF font files, and the generators will convert them into WOFF/WOFF2 alternatives. You'll also get the necessary CSS to use the new font files on your website. All tools also have additional settings, including subsetting options which we'll get to shortly. You can tweak these further if you know what you're doing.
I use two custom font faces on my own website at the time of writing (I've got an update in the works that will remove these). By converting the TTF version to WOFF2 (without any additional optimisations) I was able to cut 1.1MB from each file. This gave me two files of 280kB each. To get these font files even smaller we can go about removing characters and glyphs that we know we won't be using.
Subsetting fonts to remove unused characters
Fonts can contain hundreds of glyphs. Sometimes many hundreds more than are actually required by the web pages using them. Often they'll contain glyphs for languages and character sets that we simply don't need. Removing these additional glyphs can help shave hundreds of kilobytes off our font files.
There are a few ways of subsetting fonts:
- Command-line tools like Glyphhanger
- Online tools like Font Squirrel, Fontie & Transfonter
- Graphical tools like FontForge
Glyphhanger is a tool created by the folks at Filament Group. It's great in two ways:
- It can automatically crawl web pages to identify the characters used, and
- It can subset a font file containing only those characters.
I won't get into the ins and outs of using Glyphhanger in this newsletter. Shawn Maust has a good post on the topic. He walks you through using the tool to identify the glyphs a site uses, and then how to create a subset font file.
What's good about Font Squirrel, Fontie & Transfonter is that you can perform the subsetting step at the same time as converting font files to WOFF2. It's a handy little time saver.
In Transfonter & Fontie you can select one or more languages to keep using the Subset dropdown option. You can even subset individual characters or unicode ranges. Font Squirrel has the same options, but they're hidden behind the Expert settings option. You can select Custom Subsetting to set specific languages or characters.
If you prefer a visual interface and need some more fine-grained control over the subsetting process you can use a tool like FontForge. FontForge allows you to visually select the glyphs you want to remove. You can then save the subsetted font in the format of your choice. Here's a quick 5 step guide to get the job done:
- Open the font file with FontForge
- Select Encoding > Compact to easily view the defined glyphs.
- Select the glyphs you don’t need (use the shift key to select multiple).
- Remove selected glyphs using Encoding > Detach & Remove Glyphs.
- Save the subset font by File > Generate Fonts.
On my own website, I was using the two 280kB WOFF2 font files I mentioned earlier for much of the development process. Shortly before launching the site, I made subset versions of each to keep only the characters I felt would ever be needed. In doing this, I reduced each font file size by over 260kB (compressed) each.
So if we go right back, I had 2.6MB worth of font files (TTF versions) originally on my website. After converting them to WOFF2 and subsetting I'm now left with just 37.6kB in total. That's a monster saving right there, and one that was pretty easy to achieve.
- Optimising web fonts - Part 1 - The first part of this series, which provides the foundation of this issue and the next.
- Font Squirrel's Generator - Subset, convert and generate optimised font files plus the CSS needed to add them to your site.
- Transfonter's Online @font-face Generator - Subset, convert, and generate optimised font files plus the CSS needed to add them to your site.
- Fontie - Subset, convert and generate optimised font files plus the CSS needed to add them to your site.
- Glyphhanger - A utility belt for web fonts. Scan web pages to find out what characters are used; generate unicode ranges; and output subset font files.
- Subsetting Fonts with Glyphhanger - Shawn Maust's blog post provides an easy-to-follow guide on how to use Glyphhanger.
- FontForge - Visual interface that allows you to manually subset font files.
Who has the fastest F1 website in 2021?
Formula 1 is all about speed. Just like web performance, milliseconds matter. In this series, Jake Archibald takes a look under the hood of each F1 team's website, to see what they do well and what they could improve. There's a wealth of great tips in here, so definitely recommend taking the time to read through the series.
The next issue of Optimised will be in your inbox on April 30th. The website has an archive of all previous emails. It's a good place to recap on anything we've covered, and also handy to share with friends or colleagues.
As always if you've got any feedback or specific topics you want to be covered then just reply to this email.
Keep safe, stay well.