How to Convert Font Formats to WOFF under Linux
Since many years it is possible to use the wanted font for web sites. For each font a reference to a file for displaying the glyphs could be defined via the
@font-face rule. We saw many font formats: From Embedded Open Type (EOT) from Microsoft over True Type Fonts (TTF) to the Web Open Font Format (WOFF) nowadays. Each font face has its own file: normal, bold, italic, bold/italic, thin, extra bold, you name it.
In 2017 variable fonts were standardised which support multiple font faces in a family in one file. This is a great feature, because now you can point to one file and select the desired font face via CSS.
I wanted to play around a little bit with these variable fonts. As time of writing only a few open-sourced variable fonts were available. A great resource for an overview of available variable fonts is v-fonts.com. I picked Jost* (the font which is also used previously on this website). Jost* has a mixed license: You can use the separate font files under the SIL open type license, but as you want to use the variable font file you have to pay a small amount – except you are building it on your own.
Compiling fonts out of the sources is easy, you have just use the Google tool fontmake – it is well documented so I’m not going into details.
The compiled version of Jost* in the variable font variant is in the True Type Font (TTF) format. I had to convert it to WOFF. This is a zlib-compressed version of a TTF file or an OpenType Font (OTF) which itself extended the TTF format. This saves bandwidth – so the font is faster loaded into the browser.
There are some web sites out there which do the conversion, but I wanted to do it on my own. The conversion locally can be achieved with a script named sfnt2woff.
nodejs sfnt2woff.js jost-VF.ttf Jost-VF.woff
But there is also a better compression algorithm available: Zopfli. It’s compatible with zlib, so you don’t have to worry about the compatibility. The conversion can be done with sntf2woff-zopfli. To install the program under Ubuntu Linux just run
apt install sfnt2woff-zopfli
Converting the file is easy, use the command:
The WOFF2 font file format compresses better than its predecessor. With the help of woff2_compress the WOFF2 file can be generated:
This program is available under Linux Ubuntu via
apt install woff2
Good, now we have some file formats, let’s compare the file sizes:
|File Type||Size in Bytes|
|WOFF with Zopfli||288,216|
That’s a huge difference between the True Type font and the WOFF2 format: nearly one third! Amazing. But let’s have a look at the needed font faces. This site only uses the font weight normal and bold in combination with italic. So that are four files. The WOFF files have together 164 KB file size, the WOFF2 files only 136 KB! Since I don’t need any additional fonts anymore, I stick to the traditional way of embedding a font.
Also, with the arrival of HTTP/2 in modern browsers, the concurrent downloading of files is no big deal anymore – so we don’t have to worry about the four font files – which are only downloaded, if they are needed.