Summary

You probably are familiar with loading mutiple files for a particular font, each file representing a different variation (weight/width/style), You would have one file for light, bold, italic or the variation you need, the implication is more files, although with Google Fonts you do not bear the burden of hosting the files on your server, but still deal with mutiple requests.

What is a Variable Font

A variable font gives you access to all the variations of a font contained in a given file and a single @font-face reference. With standard font files incrementation of font-weights is in multiples of 100 but variable font-weight can be incremented by any multiple within the specified range.

@font-face
{
    font-family:'STM Bold';
    font-weight:bold;
    src:url("../fonts/sansthreemintbold.woff2")format('woff2');
}

  
@font-face 
{
    font-family:'STM';
    font-weight:light;
    src:url('../fonts/sansthreemint.woff2')format('woff2');
}
    

@font-face {
    font-family: ETC-Trispace;
    src:url('../ETCTrispaceVariable.woff2') format('woff2-variations');
    font-weight:20 900;
    }

<span class="code__caption"> Font Refrence for Variable Font File </span>

Una Kravitz describes it as a font that allows you to express, compress and finesse your work, allowing for more flexibility.

Note: some variable fonts come split into two files, one for uprights and all their variations, the other containing italic variations. The file tends to be larger or just the same size as a static font file, Michelle Barker suggests that although this can be a performance win it should be used when necessary.

Google Fonts released a beta version of the API available at fonts.googleapis.com/css2 that dishes out variable fonts. Jason Pametal has a good article on Google API - variable Font.

Variation Axis

The axis of variation defines the range that is allowable for a particular aspect of that typeface, e.g a range defining the thickness or thiness. There are different axes each falling within two main categories;

1. Registered Axes: axes that have been made into standards because of frequent usage, they have also been mapped to css properties, there are currently 5 of them.

   1. Weight (wght) - font-weight
   2. Width (wdth) - font-strecth
   3. Slant (slnt) - font-style
   4. Italic (ital) - font-style
   5. Optical size (opsz) - font-optical-sizing

2. Custom Axes: this is defined by the creator of the typeface contained in the font file, usually identified with a four letter tag and always in uppercase.

Note: not all variable fonts contain the 5 axes, it could be two or three, the example font used here only has two axes width and weight. The CSS font-variation-setting property is used to access both registered and custom axes (read more about it Here) , it is recommended to use the CSS property for resgistered axes when necessary, but if the font-variation-setting is to be used, registered axes are lowercase while custom axes are uppercase.

font-variation-setting: 'wght' 200 , 'SPAC' 300;

Michelle Barker has a beautiful article on getting started with Variable Fonts

Animating the Font

Setting Up

The font to be used is ETC Trispace, a free font by Etcetera Type Company.

@font-face {
    font-family: 'ETC-Trispace';
    src: url("../fonts/ETCTrispaceVariable.woff2") format('woff2-variations');
    font-weight:100 900;
    font-display:swap;
}

You will notice from the declaration above a range has been defined, an axis can be a range or a binary choice. Weight might range from 1–999, whereas italic might simply be 0 or 1 (off or on). (reference from MDN)

HTML

<div class="text__animated">
<span>A</span>
<span>N</span>
<span>U</span>
<span>R</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>A</span>
</div>

CSS

the animation shrinks the weight, width of letters the font being used has only two axes.

    span {
     display:inline-block;
     font-family: "ETC-Trispace";
     font-variation-settings: "wght" 360, "wdth" 31;
    -webkit-animation: stretch 3s linear infinite forwards;
    animation: stretch 3s linear infinite forwards;
  }

@-webkit-keyframes stretch {
    100% { font-variation-settings: "wdth"31, "wght"670; }
    66%  { font-variation-settings: "wdth"50, "wght"50; }
    33%  { font-variation-settings: "wdth"100, "wght"150; }
    15%  { font-variation-settings: "wdth"50, "wght"300; }
    0%   { font-variation-settings: "wdth"31, "wght"670; }
  }

@keyframes stretch {
     100% { font-variation-settings: "wdth"31, "wght"670; }
    66%  { font-variation-settings: "wdth"50, "wght"50; }
    33%  { font-variation-settings: "wdth"100, "wght"150; }
    15%  { font-variation-settings: "wdth"50, "wght"300; }
    0%   { font-variation-settings: "wdth"31, "wght"670; }
  }
    

Adding a little bit of delay

 span:nth-child(1) {
     animation-delay:450ms;
   }
span:nth-child(2) {
animation-delay:600ms;
}
span:last-child {
animation-delay:2800ms;
}

View on Codepen

Placing a delay on each span could be time consuming when the number of letters start to grow, Michelle Barker in his article Variable Font Animation with CSS and Splitting JS shows how to use splitting-js as a workaround. For more information see resources below, i would recommend starting with Variable Fonts for Developers by Mandy Micheal

Resources

1. Weird things variable fonts can do by Chris Coyier
2. One File, Many Options: Using Variable Fonts on the Web by Ollie Williams
3. V-Fonts: V-Fonts is a listing of hundreds of variable fonts, including their variations axes and where to find them. It includes a mixture of paid and free/open source fonts.
4. [MDN | Variable fonts guide ] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)
5. Google Variable Font Beta API