Using Variable Fonts on the Web

What Are VFs?

A variable font is a special type of font file which contains multiple fonts within it. These internal fonts can either be accessed seamlessly along defined variations axes, or as predefined instances or states. The axes allow us to interpolate through a typeface’s design space, rather than being restricted to its defined poles. Essentially, this technology enables static fonts to become dynamic and shift their appearance.

The “Axes” of a VF

We like to think of a VF’s axis as the scenic road from one place to another… Berlin to Basel, for example. Before VFs, there were no stops in our road trip: we drove directly to our destination, no sightseeing allowed! With variable fonts, we can stop at any town or patch of grass along the way. Maybe we decide to stop and take a long break at a the gas station pizza parlor, for instance (before it gets taken over by Whole Foods).

The Advantages of Using VFs

VFs aren’t only fun and games. They also offer several practical and aesthetic advantages compared to traditional “static” font files. For example, VFs…

• Are supported by all major browsers
• Have a smaller download size compared to many static fonts
• Consist of just one font file, containing all styles
• Help address accessibility and readability issues via context-responsive type display settings
• Allow for typographic forms of interactivity
• Last but not least, with variable fonts, you can animate typography. See for yourself by streaming one of our variable fonts directly on this website, or using our Dinamo Pipeline, widely known as the “Netflix for Variable Fonts”

Loading the File

VFs can be served in the WOFF2, WOFF, and TTF file formats and are loaded like any other web fonts—with the @font-face declaration—except the format strings are a little different, as they specify that the loaded font contains “variations.”

@font-face {
  font-family: "Favorit Variable";
  src: url("/fonts/FavoritVariable.woff2") format("woff2-variations"),
       url("/fonts/FavoritVariable.woff") format("woff-variations"),
       url("/fonts/FavoritVariable.ttf") format("truetype-variations");
}

If you need to support older browsers that aren’t able to support VFs, specify a fallback font and it will be loaded if the VF can’t.

// Variable font
@font-face {
  font-family: "Favorit Variable";
  src: url("/fonts/ABCFavoritVariable.woff2") format("woff2-variations"),
       url("/fonts/ABCFavoritVariable.woff") format("woff-variations");
}

// Fallback static font
@font-face {
  font-family: "Favorit";
  font-weight: normal;
  src: url("/fonts/ABCFavorit-Regular.woff2") format("woff2"),
       url("/fonts/ABCFavorit-Regular.woff") format("woff");
}

body {
  font-family: "Favorit Variable", "Favorit", sans-serif;
}

Styling Variable Fonts

There are a few different ways to set the axes of variable text, depending on which axes you’re using. In general: use the CSS properties font-weight, font-stretch and font-variation-settings. Below we’ve covered how to use them.

While it’s preferable to use font-weight and font-stretch due to their greater support, using font-variation-settings is necessary for controlling axes besides weight and width.

Weight

The property font-weight corresponds to the weight of a font. We provide the range of the weight axis when defining our @font-face , which then allows us to use the font-weight property elsewhere.

@font-face {
  // ...
  font-weight: 300 700;
}

.my-variable-text {
  font-family: "Favorit Variable";
  font-weight: 550;
  // OR
  font-variation-settings: "wght" 550;
}

User Interactions

Once you’re up and running, it’s dead easy to create interactive user-based VF effects. In the example below, we used the CSS :hover selector to dynamically shift the weight of our grotesque font Favorit when a user hovers over the big, blue pill-button.

Notice how we added the CSS transition rule with a transition defined for the font-variations-settings, which makes the hover effect buttery smooth.

.my-variable-text {
  font-family: "Favorit Variable";
  font-variation-settings: "wght" 300, "ital" 0;
  transition: font-variation-settings 0.3s ease;
}

.my-variable-text:hover {
  font-variation-settings: "wght" 700, "ital" 12;
}

Adjusting Based on Screen Properties

VFs can be utilized as a responsive design tool by making them react to screen size, orientation, or other readability factors.

Below, we adjusted the width of Favorit to help conserve space when the screen width is small. This is especially useful for headline text, which needs to fill space on desktop screens, while being preserved on mobile devices (to avoid nasty word breaks).

.my-text {
  font-family: "Favorit Variable";
  font-variation-settings: "wdth" 100;
}

.my-variable-text-01 {
  font-family: "Favorit Variable";
  font-stretch: 80%;
  // OR
  font-variation-settings: "wdth" 80;
}

Setting the Axes with JavaScript

You can also set an element’s axis values using JavaScript, which opens up a magnitude of possibilities for interactivity and experimentation. The font-variation-settings, font-weight and font-stretch parameters are all editable—just make sure that your input values are formatted correctly to avoid trouble.

myText.style.fontVariationSettings = "\"wght\" 550, \"ital\" 6";
myText.style.fontWeight = 550
myText.style.fontStretch = "150%"

Below, we randomized the axes of our own Ginto so that it shifts every second, creating a wacky title effect.

function randomizeText() {
  randomWeight = Math.random() * (200 - 35) + 35;
  randomWidth = Math.random() * (200 - 100) + 100;
  myText.style.fontVariationSettings = "\"wght\" " + randomWeight + ", \"wdth\" " + randomWidth;
}

setInterval(randomizeText, 1000);

Animating with CSS Keyframes

The simplest way to animate variable fonts is with CSS @keyframes, which allows you to create simple and smooth animations. While these can’t be controlled as easily as JavaScript animations, it works a treat for most situations.

@keyframes ginto-animation {
  from {
    font-variation-settings: "wght" 0, "ital" 0, "NORD" 100;
  }
  to {
    font-variation-settings: "wght" 200, "ital" 100, "NORD" 200;
  }
}

.my-variable-text {
  font-family: "Ginto Variable";
  transition: font-variation-settings 0.3s ease;
  animation-name: ginto-animation;
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

This creates simple and smooth animations.

Animating with JavaScript

JavaScript can be utilized to animate VFs in evolving and more complex ways than CSS. Any JS libraries containing animation engines can be used for this particular task, such as jQuery, anime.js, Velocity, and GSAP. Alternatively, our own library—the Dinamo Font Animator—has been written specifically for animating VFs. It comes with a variety of handy features relevant specifically for VF animations. Visit the GitHub page to download it and find out more.

Below is a simple example detailing how to use our Font Animator. Visit the GitHub page to download the library and find out more. NOTE: the GitHub link for the Font Animator is coming soon!

var fontAnimator = new FontAnimator(document.getElementById("text"), {
  playing: true,
  axes: [
    {
      name: "wght",
      min: 30,
      max: 200,
      speed: 1500
    }
  ]
});