Variable fonts: one file, infinite weights

What changed in 2018

Before variable fonts, "Inter Regular," "Inter Medium," "Inter Bold" were THREE separate font files (~100KB each = 300KB to ship). Variable fonts pack all weights/widths/slants into ONE file (~150KB total). Less bandwidth, instant weight changes (e.g. on hover or animation).

@font-face {
  font-family: "Inter";
  src: url("/inter-variable.woff2") format("woff2-variations");
  font-weight: 100 900;       /* declare the available range */
  font-display: swap;
}

font-weight here is a RANGE — any value from 100 to 900 works:

body { font-weight: 400; }
h1 { font-weight: 800; }
button:hover { font-weight: 600; }    /* even non-standard weights work */

More axes than weight

Some variable fonts expose more dimensions:

• font-weight (100-900)
• font-stretch (50% condensed → 200% extended)
• font-style slant (-15° to 15°)
• Custom axes via font-variation-settings:

.special {
  font-variation-settings:
    "wght" 650,         /* weight */
    "slnt" -5,          /* slant */
    "opsz" 14;          /* optical sizing */
}

Use the per-property shortcuts (font-weight) over font-variation-settings when you can — they animate cleaner and respect cascade.

File size comparison

Half the bandwidth. Plus animate-able weight transitions.