Create a variable font subset for smaller file size

Introduction

Using custom fonts are a great way of standing out from the crowd and bring a personal touch to any website. It can come with a cost though if you use Variable Fonts with “all the trimmings” as the file size makes them prohibitive to use.

There are a few tools that can do the subsetting work, I’m using FontTools for the purpose of this article.

Set up Python fonttools, a tool to ‘subset’ fonts

Step 1. Ensure your terminal app has python configured

If you’re using macOSMonterey you’ll probably find that python is not configured to execute python3. If that’s the case you may wish to add an alias to your .zshrc file. First open up the file.

nano ~/.zshrc

Add the alias at the bottom of the file.

alias python=/usr/bin/python3

source ~/.zshrc

Test that it’s all working correctly, type the command below and you should get something like Python 3.x.x returned.

python -V

Step 2. Install fonttools & brotli via pip

We’ll be using fonttools an open source font manipulation library written in Python. To install we’ll use the Package Installer for Python (PIP).

python -m pip install fonttools

Now we’ve installed the main library we need to install Brotli compression. This is required to output a WOFF2 font file.

python -m pip install brotli

Step 3. Change directory to where the original font is held

cd /path/to_where/my_font_is

Step 4. Run the pyftsubset command to subset the font

The example below uses the Inter variable font (using Googles version for this demo) and has been split across several lines for readability.

pyftsubset Inter-VariableFont_slnt,wght.ttf 
  --unicodes="U+0020-007F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2200-22FF, U+FB00-FB4F, U+2190-21BB" 
  --layout-features="*" 
  --flavor="woff2" 
  --output-file="Inter.var.woff2"

When you type the command into the terminal it should be as a single line.

pyftsubset Inter-VariableFont_slnt,wght.ttf --unicodes="U+0020-007F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2200-22FF, U+FB00-FB4F, U+2190-21BB" --layout-features="*" --flavor="woff2" --output-file="Inter.var.woff2"

And voilà we have a WOFF2 variable font that has been transformed from hundreds of kilobytes to less than 90.

Great! But… what does it all mean?

Reading through the split list above, here is the breakdown.

1. pyftsubset Inter-VariableFont_slnt,wght.ttf
   Is the command followed by the font file name.
2. --unicodes="..."
   Are the set of unicodes that are to be included in the font. More details below.
3. --layout-features="*"
   Specifies which layout features to include, like alternate characters, kerning, ligatures, and numerals. For simplicity I used * which means ‘everything’ gets included. For further information see the fonttools documentation.
4. --flavor="woff2"
   Is the font format to be saved in. WOFF2 has 95% coverage according to caniuse.com.
5. --output-file="Inter.var.woff2"
   Is the name of the file you wish to call your subsetted font file.

The unicode options

• U+0020-007F Basic Latin.
• U+2000-206F General Punctuation.
• U+2070-209F Superscripts and Subscripts.
• U+20A0-20CF Currency Symbols.
• U+2100-214F Letterlike Symbols.
• U+2200-22FF Mathematical Operators.
• U+FB00-FB4F Alphabetic Presentation Forms.
• U+2190-21BB Symbol — Arrow.

Go to the ‘Choosing your Unicode Sets‘ section to see how I figured out what to use.

Documentation and helper tools

FontTools Documentation

The fonttools library comes with a lot of options and there is extensive documentation to help you with any further configuring you wish to do.

What Can My Font Do? (wakamaifondue)

This website is a fantastic resource. It’s a helper tool to break a font down into its component parts and give details about each element.

You simply open the website (on desktop) then ‘drag and drop’ your font of choice onto the open page and the site does the rest automagically.

Choosing your Unicode sets

When it comes to choosing which Unicodes you want to use, if you look at Image 2, at the bottom you’ll see a section called “Symbol — Arrow.” In order to add it to my list I used U+ then the start element 2190 add a dash - then the last element 21BB. Altogether we have U+2190-21BB. Add that into the --unicodes="..." section along with the others you want and that’s how you build the Unicodes list.

In conclusion

There’s a lot to take in and learn. If you follow the basics I laid out you can get quick wins but in order to properly hone it down you’ll need further research into the documentation.

Add in a fair bit of experimentation and I believe you’ll end up really liking the results. Your audience certainly will, with a smaller web performant font file (or files) for faster download(s) saving on bandwidth.