How to disable a variable font's variation features with open source tools
Posted on
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
- A variable font, let's call it
"MyAwesomeVariableFont"
, that includes a bunch of variation features and in its.ttf
(True Type Font) form fonttools
command line tool (Install fonttools)- varLib instancer documentation
woff2_compress
command line tool (Get up to speed by following How To Convert Variable TTF Font Files to WOFF2)
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.
- Download MyAwesomeVariableFont font under the name of
MyAwesomeVariableFont.ttf
- In the Terminal navigates to the folder you have just downloaded the font to
- Run
fonttools varLib.instancer ./MyAwesomeVariableFont.ttf wdth=drop opsz=drop wght=300:700
- Run
woff2_compress ./MyAwesomeVariableFont-partial.ttf
- Run
mv ./MyAwesomeVariableFont-partial.woff2 ./MyAwesomeVariableFont.woff2
- 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.