How to Use Variable Fonts from Google Fonts

Figuring out how to use variable fonts from Google Fonts was surprisingly tricky, and I couldn't find a single site that just told me how to do it, so I'm rectifying that. I am not going to explain what variable fonts are or why you might want to use them. Instead I am going to explain:

1. How to download them from Google Fonts
2. How to compress the downloaded fonts to WOFF2 format
3. How to distribute them and what css you need to include

How to Download Fonts from Google Fonts

I'm going to assume you know what fonts you want to use. In my case it is EB Garamond and Inter. If you search for these in Google Fonts you will find a button that says "Download Family" in the top right corner of the page. Clicking this downloads a zip file. Unzip this. There will be a lot of files, but the ones we care about should have .ttf extensions and contain "VariableFont" in the name. In my case, the Inter font only had one such such file, and EB Garamond had two such files (one for italic and one for non-italic). Move these files to their own directory. I put all my fonts for this site in a directory called "fonts".

Compressing to WOFF2 Format

The truetype format that the fonts are in will work fine, but since the fonts need to be downloaded by every user of your site it is better to use the smallest file size possible. Google came up with a font format called WOFF 2.0 that is smaller than TrueType. They have also written some software that can take in .ttf font files, compress them, and output .woff2 files. To use this software run the following commands

git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all

This builds several binaries. The one we care about is woff2_compress. I copied it to a directory in my path so that I can easily run it. To use it simply call it like this woff2_compress path/to/font.ttf. The output is stored in the same directory as the input. Simple.

Distributing The Fonts With Your Site/Web Application

This step is actually really easy. Now that you have the .woff2 files downloaded all you need to do to make them accessible to your webpages is to add some CSS:

@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts/EBGaramond-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts/EBGaramond-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: italic;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-VariableFont_slnt,wght.woff2') format('woff2-variations');
  font-weight: 100 900;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Inter;
}

p {
  font-family: 'EB Garamond';
}

This is fairly straightforward, but there are a couple of non-obvious things to note. First, there are two @font-face declarations for EB Garamond. This is because it has a normal version and an italic version. To indicate the normal version we add font-style: normal and to indicate the italic version we add font-style: italic. The web browser will be able to determine which version is intended by the font-style property on any given element. The font-weight properties tell the browser what the range of the font-weight value is allowed to be. For EB Garamond this is 400 to 800 while for Inter it is 100 to 900.

Hopefully this post saves you some time. If anything is unclear please email me and I will try to help you out and update this post so that others can benefit from it as well.