Variable Fonts in Your Web Projects - Getting Started

Before we check out some code, let us briefly discuss what variable fonts are.

OpenType Font Variations

OpenType font variations allow us to create a single font file that contains a variety of fonts from a single typeface.
Variable fonts are fonts that use OpenType font variations. By using variable fonts, we now have access to every variation of a given typeface in a single file, reducing the number of font files considerably. We no longer need a font file for every single style, weight, or even width.

Font Variation Settings and the Variation Axis

With variable fonts, one of the main concepts is an axis of variation. The axis of variation is a range of values to describe a specific aspect of a typeface.
For example, a 'slant' axis * describes how much slant should exist in letterforms, or a *'wght' axis describes how much weight exists in letterforms.

Typeface designers have the ability to use five registered axes of variations.

These are:

1. Weight
2. Width
3. Slant
4. Italic
5. Optical size.

These five axes were added to the specification.
Designers also have the ability to add custom axes for their variable font.

Loading a Variable Font.

I wrote about loading a variable font that uses FontFaceObserver. This can be used to optimize your font loading.

Specify a font using @ font-face CSS rule

@font-face {
    font-family: "Vollkorn"; // typeface we are using
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1312918/Vollkorn-VariableFont_wght.ttf') 
    format('truetype-variations'); // we have a .ttf font file, support Safari, Android, iOS
    font-display: swap; //browser use fallback font to display content until custom font has downloaded
}

Depending on the type of variable font you are using, you can set the format as woff2-variations, woff-variations, opentype-variations or truetype-variations. This blog from Ollie Williams on CSS-Tricks explains it in more detail. As Ollie says, we should try our best to use woff2 where possible.

Use font-family and set font-variation-settings

Let us change the the font-weight by using font-variation setttings. If we set the weight to 400,
it will look like the following:

h1 {
    font-family: 'Vollkorn', serif;
    font-variation-settings: 'wght' 400; // see wakamaifondue to get min and max values
}

Now if we decide to change it to the max weight, which is 900, we will see:

h1 {
    font-family: 'Vollkorn', serif;
    font-variation-settings: 'wght' 900; // see wakamaifondue to get min and max values
}

We can perform animation by changing the font-variation-settings:

@keyframes scale {
    0% {
        font-variation-settings: 'wght' 400;
    }
    50% {
        font-variation-settings: 'wght' 900;
    }
    100% {
        font-variation-settings: 'wght' 400;
    }
}

The result is a fun animating variable font:

Support for Older Browsers

Check Can I Use for variable font support.

You can check if the browser supports font variation settings:

@supports (font-variation-settings: normal) {
  html {
    font-family: 'SourceSansVariable', sans-serif;
    font-variation-settings: "wght" 900;
  }
}

You can also check if the browser does not support font variation settings:

@supports not (font-variation-settings: normal) {
  html {
    font-family: sans-serif
  }
}

Finding Variation Axes - Wakamaifondue

A service that I use is wakamaifondue, which provides us with tonnes of information about an uploaded font file. When I uploaded a DecovarAlpha variable font to wakamaifondue, I could see it provides me with a short summary about that font. It also provides an interactive area where you can change the variations of axes and see the available characters for that font.

This is a TrueType variable font with 114 characters. It has 15 axes and 0 named instances. It has no layout features.

I wrote a tweet showing how useful this can be. You can see it below:

Benefits of Variable Fonts

1. Single File

As we are only loading one single variable font file which includes all variations of a typeface, it reduces the number of HTTP requests considerably.

Let us pretend we are dealing with static fonts and we decided to use the Poppins typeface. If we needed every font variation of Poppins, we need to make a request for every file. If we need 'Poppins Regular', 'Poppins Bold', and 'Poppins Bold Italic', then we have three font files to deal with.

2. Full Variation Access

With variable fonts, we have access to the full variation settings for that typeface, meaning we can do more with our type and really make the most out of our designs.

*3. Fluid Type Animations *

We have the ability to animate between the different variations in our file, which means we have endless possibilities for animation.

Codepen Examples

A codepen example by Gary Byrne showing how to animate a variable font.

A codepen example by Mandy Michael showing how to animate a variable font.

References

A list of useful links that really helped me understand variable fonts.

OpenType Specification

Frontend Masters Course By Jason Pamental

Mandy Michael Codepen

MDN Variable Fonts Guide

Variable Fonts List