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
fonttoolscommand line tool (Install fonttools)
- varLib instancer documentation
woff2_compresscommand 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
- In the Terminal navigates to the folder you have just downloaded the font to
fonttools varLib.instancer ./MyAwesomeVariableFont.ttf wdth=drop opsz=drop wght=300:700
mv ./MyAwesomeVariableFont-partial.woff2 ./MyAwesomeVariableFont.woff2
MyAwesomeVariableFont.woff2to your app's font folder
In the above steps, only
4. need deeper explanation.
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
4. we run
woff2_compress CLI tool to compress our
partial font to the
.woff2 format, much more suited for the web.
Now, once loaded on your site/application, you should only be able to apply
variations on the Weight axis, and from
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.