Paring down webfonts in FF Subsetter

Start optimizing by first taking a look at your type palette and seeing what you’re loading, but not using. Your text face’s bold italic might be a good place to start. Also check for styles only used in certain sections of your site. These don’t need to be loaded initially unless the user is landing in a section that requires them.

Second, I’d look into subsetting. Here’s what it is: Say you’re using a nice big display typeface to set numbers in an infographic, but that’s all you use it for. You load the entire font, but you only use its figures. Subsetting lets you strip out all the unnecessary characters, so instead of loading the full file that’s 90 kilobytes, you load one that’s 5 kilobytes.

All major webfont distributors give you options for subsetting, but here I’ll discuss the one we made, FF Subsetter, created exclusively for paring down webfonts from our house brand, FontFont. You can try it without buying anything. Just follow the link where you’ll find a demo copy of FF Bauer Grotesk Medium Web Pro waiting for you in the top right corner.

Open up that zip file to find this pretty fantastic demo page that steps you through the webfont’s features (above). Messing around with the Stylistic Sets and other toggles gives you a better sense for the ways FF Subsetter allows you to fine tune the feel of a face based on its OpenType features. Even though the most basic OpenType features are widely supported across all up-to-date browsers, the subsetter can be used to bake in only the ones you want, with the added bonus of a reduced file size.

Okay. Upload the webfont (ending in .woff) to FF Subsetter to get started shaving of those nonessential bits. By default, you start with Basic Subsetting. Even though options are grouped with check marks that enable or disable the entire group together, you can similarly make even finer adjustments, disabling and enabling individual characters by selecting them individually. To keep this whole process from being too precious, I recommend making a few arbitrary changes, downloading the resulting file, and adding a number to it, like 001, just so you can get a feel for how the tool works, and so you can get into the habit of keeping all subsequent subset output identifiably marked.

For more advanced options, go to Expert Subsetting at the top. This gives you the ability to filter which characters will be subset based on language, or OpenType features, like I mentioned closer to the top. You can choose to either preserve all the characters required to make a given feature work, or you can freeze the feature, meaning that the characters that show up when that feature is enabled—become the new default. For example, if you always want FF Bauer Grotesk to be shown with a double-story lowercase a, then freeze Stylistic Set 2, and your preferred a will show up by default.

A note on subsetting by language: Be careful not to subset too aggressively as Typekit developer Bram Stein calls it. Just because I’m writing this in English, I can’t know what other languages people’s browsers will translate this story into. And even in English, I can’t rule out the eventuality of mentioning a type designer like František Štorm or Peter Biľak whose name might contain a character I’ve tossed out. You may of course decide you’re going to draw the line with Greek or Cyrillic support, or create a secondary subset font with just these characters, and add it just behind in your font stack.

As its warning mentions, not all of the advanced features make sense when used all at once. Kerning data, for example shouldn’t be deleted unless you really don’t need it. When might you not need it? Well, if you’re only using a typeface to set numbers using tabular figures, kerning data is irrelevant and may be eliminated, since characters that are all fit to a common width require no kerning. What about hinting? There are very few cases I can think of where getting rid of the hinting data is a good idea. One might be when you know you’ll only be using the typeface at a quite large size.

That’s it. Use these steps and you’re on your way to a lighter page load.

A couple of end notes: Asynchronous font loading may be made a bit simpler using this open source webfont loader, made in collaboration by the people at Typekit and Google. And, though the latest format, woff2, is available in our webfonts, FF Subsetter presently doesn’t support it. Stay tuned for updates on that front.

Any questions on any of this stuff? Let me know!