Table of Contents
I’ve been working on a project lately that requires the loading of many, many webfonts. For the main UI font alone, we needed to download over 980kB of WOFF and WOFF2 files. As it happened, the client eventually developed a variable font version of the UI face, which was a much smaller 225kB file.
However, when I received the variable font file, I realized it was a TTF, and not the WOFF2 that I would need to implement it in a
@font-face declaration for web. In previous experience, converting variable TTF to WOFF via online tools like convert.io or FontSquirrel would often break the axes needed to interpolate between font variation settings.
A cursory search yielded Google’s woff2 library, a tool for compressing TTF to WOFF2 — it worked perfectly. Here’s how to do the thing.
This is covered in
woff2's README file, but we’ll go over each step here in a little more depth, so it’s clear what’s going on.
Clone woff2 locally.
Open a terminal and
cd into whichever directory. This doesn’t need to be installed in a specific place, just remember where you’re putting it. For this tutorial, I’m going to clone it into my
cd ~/Sites git clone --recursive https://github.com/google/woff2.git cd woff2
Here, we entered the correct directory, cloned the repo recursively, and entered the cloned directory.
woff2 uses the Brotli compression library as a dependency, so you need the
--recursive flag to clone everything inside this repo.
Next, we’ll run a command to build the library and its dependencies, which will create the scripts we’ll need.
make clean all
If there were no errors, we should be good to go! (If there were errors, send me a DM and we’ll debug through so it so I can update this blog post with troubleshooting steps.
Now that we’ve created the binary scripts for compressing and decompressing TTF into WOFF, we can run them here. In this example, I’ve downloaded the variable TTF to my
You’ll get some output like this:
Processing /Users/henry/Downloads/variable-font.ttf => /Users/henry/Downloads/variable-font.woff2 Compressed 216568 to 94577.
And voilà, we’ve got a variable WOFF2 file, ready for use on the web.
Thanks for taking the time to read this. If you’ve got any questions or concerns, please reach out and touch faith and we’ll work through it together! Have a great day.
Header image by William J Simpson via Unsplash.