profile picture

Variable Fonts

September 23, 2021 - Font Web

TIL about variable fonts. Instead of having to load a bunch of (predefined) different font weights and styles into the browser, it's possible to use one variable font which contains parametrisation for how the font looks at different weights.

Instead of:

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Rubik-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Rubik-Medium.woff2) format("woff2");
}

You can use:

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/Rubik-VariableFont.woff2) format("woff2-variations");
}

Interestingly, while the web.dev site I linked to above suggests to use format("woff2 supports variations"), Mozilla's documentation on the topic suggest to stick with format("woff2-variations").