Web fonts have come a long way in the last few years. There are as many great options as there are creative people in the world. Many decent options are free or available for a reasonable fee.
We can use fonts and font combinations as tools of expression and creativity. We can impress certain feelings upon our users through expert font usage, which can lead to powerful, satisfying ends for all participants.
But fonts can also make the web slow. In the interest of a fast web, how can we make fonts faster?
Recently I found a font that I really liked and I started using it on one of my sites.1 As usual, I found myself doing some light performance profiling of the page some time thereafter.
I was horrified to discover that the font weighed in at a whopping
1.1MB, roughly 10x the size of the entirety of the rest of
the content and assets, literally everything else coming down through
the pipe.
I thought this would be a great time to investigate why the font was so large and I hoped it would give me an opportunity to try an optimization I was curious about.
The optimization I was interested in was Font Subsetting. This is just the process of taking each glyph (or character) in the font and removing the ones you don’t need.
The font contained 421 glyphs and I was pretty sure I didn’t need them all.
I loaded the font into FontForge2 and thought about my use case: I was only going to be using the font to write title-sized/display content in English, with the additional potential for very basic English punctuation. Knowing this, I got rid of everything that wasn’t an English-language alphanumeric or basic English punctuation.
When I re-generated the font, I was down to 96 glyphs and the new file size was roughly 33% of the original filesize.
330KB for a font isn’t even close to excellent — pages
should be much smaller — but it’s an example of the kind of improvement
you can see from font subsetting.
After more reflection on my use case, I have high confidence that I
could reduce this font’s size by another ~100KB without
much effort. 80% filesize reduction isn’t bad at all.
If you can identify the use cases for your font, there’s a good chance that you’ll be able to remove a lot of the glyphs that you just won’t need. This is a simple and straightforward performance optimization.
FontForge is a free/open source that will let you edit fonts and output changes to a wide variety of formats. This is what I used for my investigation.
FF Subsetter is an online tool that claims to automatically optimize fonts. I didn’t have any luck with it, but I only tried one font.
Font Squirrel has a webfont
generator that does some automatic optimization. The output that it
gave me was significantly smaller — 660KB — a decent
optimization, but not even close to what I was able to get. There are a
lot of optional tweaks here that might deliver better performance.
Google Fonts will let you selectively choose which characters to render. You can read more about that feature here under the ‘Optimizing Requests’ heading.
Lastly, there’s the Glyphs app, which is a very sophisticated font creating and editing tool, but unlike the other options here it isn’t free. https://glyphsapp.com
In fact, the site was this site. See the header font for the ‘brushup’ font style.↩︎
I had serious trouble getting
FontForge installed on Mac OS 10.11. I tried installing the app as
described on the FontForge webpage linked above and I also tried via a
couple of Homebrew formulas. There are a handful of recent issues on
GitHub (like this
one) where people are talking about the problem and how to solve it.
Ultimately what worked for me was using the .dmg referred
to in this
issue.↩︎