How to disable a variable font's variation features with open source tools

Today at work I was told to integrate a variable font on our pages. Once integrated I found out that the font, despite converted to .woff2 format was still weighting half a mega byte.
This font featured several variations, for instance the Width, Weight and Optical size variations. In our use case we were just using the Weight variation.
I then asked myself, is there a way to strip features from a variable font?
Hence, not being a designer and not having fancy paid applications at my disposal I was in reach for an open source solution.

After quite some research I found the perfect set of tools!

Below is my step-by-step guide to achieve striping out 2 variation features out of a font, as well as reducing the Weight variation range.

What you need

Generating MyAwesomeVariableFont.woff2 partial variable font

In the below commands, it is considered that the command line tools are in your $PATH, if not you can also use the absolute path to their binaries.

  1. Download MyAwesomeVariableFont font under the name of MyAwesomeVariableFont.ttf
  2. In the Terminal navigates to the folder you have just downloaded the font to
  3. Run fonttools varLib.instancer ./MyAwesomeVariableFont.ttf wdth=drop opsz=drop wght=300:700
  4. Run woff2_compress ./MyAwesomeVariableFont-partial.ttf
  5. Run mv ./MyAwesomeVariableFont-partial.woff2 ./MyAwesomeVariableFont.woff2
  6. Copy MyAwesomeVariableFont.woff2 to your app's font folder

In the above steps, only 3. and 4. need deeper explanation.

In step 3. we use the varLib instancer in order to drop the Width (wdth) and the Optical size (opsz) variation features as well as to restrict the Weight (wght) variations to a range that spans from a font-weight of 300 to 400.

In step 4. we run woff2_compress CLI tool to compress our .ttf generated partial font to the .woff2 format, much more suited for the web.

Conclusion

Now, once loaded on your site/application, you should only be able to apply variations on the Weight axis, and from 300 to 700.
And most importantly you should have drastically reduce the footprint of your variable font.
In my case the .woff2 file footprint had decreased by 73%.

Feel free to explore the varLib instancer documentation to address your needs.