Variable Fonts


These are an evolution to the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file. This could allow for more creative decisions or even a reduction in bundle size if you are importing a lot of different weights for the same font.

More details can be found on the MDN Web Docs.

A limited set of Google fonts support this feature and the full list of those supported can be found here.

Installation


This particular example uses the Cabin font.

Begin by importing both the variable and fallback font for non-compatible browsers.

import "@fontsource/cabin/400.css"; // Weight 400.

Select either a stripped down weights only variant of the font or a full feature variant that contains all the variable axes.

import "@fontsource/cabin/variable.css"; // Contains ONLY variable weights and no other axes.
import "@fontsource/cabin/variable-italic.css"; // Italic variant.
// Or
import "@fontsource/cabin/variable-full.css"; // This contains ALL variable axes. Font files are larger.
import "@fontsource/cabin/variable-full-italic.css"; // Italic variant.

For the CSS, you should consider using the @supports tag, which checks whether the browser is capable of utilising variable fonts. Fallback fonts and their relevant CSS should be used outside the block, whilst all variable options should be used within the @supports block and utilising the font-variation-settings tag.

h1 {
font-family: "Cabin", sans-serif;
font-weight: 400;
}
@supports (font-variation-settings: normal) {
h1 {
font-family: "CabinVariable";
font-variation-settings: "wght" 400;
}
}

Alternatively, you can choose to have the default browser fonts to act as the fallback (e.g. sans-serif) which will only affect a very small subset of users in a minor way. This is something the current Fontsource website actually does and produces a leaner final bundle for users without much disruption.

p {
font-family: "InterVariable", sans-serif;
font-weight: 400;
}