How to use a variable font

Short answer

A variable font is a single file in which the weight (and sometimes the width and slant) changes smoothly. Connect it with @font-face and a weight range:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
 
h1 { font-family: "Inter", system-ui, sans-serif; font-weight: 650; }

font-weight: 100 900 tells the browser that the file has every weight from 100 to 900, so any number works, not just round hundreds.

Any weight and animation

With a variable font the weight can change smoothly. Hover over the word:

<style>
  .grow { font: 300 32px system-ui, sans-serif; transition: font-weight 0.4s; }
  .grow:hover { font-weight: 800; }
</style>
 
<p class="grow">Hover me</p>

The system fonts of Windows 11 and macOS are variable, so there the weight changes smoothly. With an ordinary font it jumps between the available weights.

Other axes

Standard axes are controlled with ordinary properties: weight with font-weight, width with font-stretch, slant with font-style: oblique 10deg. A font's own axes, such as "softness", are set with font-variation-settings and a four-letter name:

.title { font-variation-settings: "SOFT" 100; }

Common mistake

Setting the weight with font-variation-settings: "wght" 650 instead of font-weight: 650. That property overwrites all axes at once and is not inherited piece by piece, so a <strong> inside stops being bold. Use the ordinary properties for standard axes and font-variation-settings only for non-standard ones.