Converting TTF variable fonts to WOFF2

For the project I am currently working on, I needed to use a variable font in WOFF2 format, specifically it is the Inter font that when downloaded, we have all the options and formats, so I have not needed conversions, but let’s see the process.

I have three variable sources of Inter:

One for “normal” characters with weights from 100 to 900, another for “italic” characters with the same weights and finally another font that includes both (from 0 to 10 degrees).

A priori, the third font seemed ideal, but looking at https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-variation-settings I see that besides not being supported by Internet Explorer (which I don’t even look at anymore), it is not supported by Safari either, which is becoming the new Explorer.

In this case it is very typical that the client ends up telling us that it is not visible on his computer; guess what browser he uses… so we have to give him support and to use this third variant we should have something similar to this for our source:

* { font-variation-settings: "slnt" 0deg } 
em { font-variation-settings: "slnt" 10deg }

So I directly opt for using the two variable sources:

@font-face {
   font-family: 'Inter';
   font-weight: 100 900;
   font-display: swap;
   font-style: normal;
   src: url("inter-roman-var.woff2") format("woff2");
 }
 @font-face {
   font-family: 'Inter';
   font-weight: 100 900;
   font-display: swap;
   font-style: italic;
   src: url("inter-italic-var.woff2") format("woff2");
 }

You could use conditionals to load one or the other source, for example:

@supports (font-variation-settings: normal) {
/* aquí el CSS condicional*/
}

But for the time being, as long as the Slant shaft mount is not more widely supported, I’m going to go with the two variations.

Convert to WOFF2

But let’s get to the heart of the matter, what we were coming to. There are many online services to convert between different font types, but they do not work well with variable fonts.

For that I used WSL2 with Ubuntu 20.04, it could be another distro, on an online server, local virtual machine, etc.

There we configure that our programs can be compiled by installing the necessary packages:

$ sudo apt-get install build-essential

Then we go to the directory we want, for example our /home and download the Google woff2 converter:

$ git clone --recursive https://github.com/google/woff2.git

We enter the directory created and compile:

$ cd woff2
$ make clean all

And if everything has gone well, we already have in the woff2 directory three executables, one to compress our sources to woff2(woff2_compress) and that works wonderfully also with the variable sources, another to decompress them(woff2_decompress) and a third one to obtain information of the woff2 file(woff2_info).

If we have in the same directory the font Inter.ttf (complete variable font that weighs 787 kb.), we can convert it in the following way:

$ ./woff2_compress Inter.ttf

And we will have the complete variable font in woff2 format with a weight of about 318 kb.

Remember that my thing is programming and not typography issues, so if I have made any mistake in terminology or something here is incorrect, I appreciate any correction in the comments and if you really want to know more about fonts, variable fonts and the whole universe of design, Ana Cirujano is the reference person you should contact (and hire).