Web Font Anti-Pattern: Aggressive subsetting
October 13, 2015
Subsetting is a great way to reduce the file size of your fonts. Don’t go overboard with subsetting though, there may be unexpected consequences. Subset, but subset with care.
Professionally designed fonts usually contain support for multiple languages so they can be used all over the world. However, if you only write your content in a single language, you probably don’t want to pay for the extra weight these unused characters add to your page load time.
This is where subsetting comes in. It allows you to remove characters and OpenType features from a font file that you don’t need. There is an almost one to one relationship between the number of characters in a font file and its file size. If you cut the number of characters in half, you will also cut the file size of a font in half. This is a great way to optimise a font and make it load faster.
Subsetting can be done using tools like Font Squirrel’s web font generator, command line tools, or through the user interfaces of web font services like Typekit, Google Fonts, and others.
Be very careful with subsetting because it can go very wrong. Text often contains names, place names, quotations, and loan words from other languages. If the web font subset does not contain the characters used in the page they’ll fall back to the next font in the stack. This is highly undesirable, because quite often the web font and fallback font do not match.
That’s not to say subsetting isn’t useful. If used carefully it can be a great way to reduce the size of your font files. Before you subset carefully analyse your existing content and think ahead to what characters and OpenType features you might use in the future.
This article is part one of an ongoing series on web font anti-patterns. Read the introduction, part 1, part 2, part 3, and part 4.