How to Use Variable Fonts in WordPress

A normal (“static”) font needs a separate file for every weight and style: Regular, Medium, Bold, Bold Italic. A variable font packs a whole range of weights (and sometimes widths or slant) into one file. For websites that means fewer requests, often fewer kilobytes, and designers can use any weight in between, like 450 or 650.

When a variable font is smaller

A single variable file is bigger than one static weight, so it’s not automatically a win:

You use	Usually better
1–2 weights	Static files
3+ weights of the same family	One variable file
Weights that animate or change on hover	Variable (smooth transitions)

Check the numbers for your font: compare the WOFF2 sizes of the static files you’d need with the one variable WOFF2.

Step 1: get a WOFF2 file

Variable fonts are often distributed as .ttf. Convert them to WOFF2, which is much smaller. Our free variable font converter does it in your browser and keeps every axis intact. Google Fonts and many foundries also offer variable versions directly.

Step 2: add it with @font-face

The key difference from static fonts is the weight range in font-weight:

@font-face {
  font-family: "Inter";
  src: url("/wp-content/uploads/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body { font-family: "Inter", system-ui, sans-serif; }
h1   { font-weight: 750; }

font-weight: 100 900 tells the browser this one file covers everything from Thin to Black. Now any weight you set is rendered from the same file.

Step 3: extra axes (optional)

Some variable fonts have more axes than weight: width (wdth), slant (slnt), optical size (opsz). Use them with font-variation-settings or the matching CSS properties:

.condensed { font-stretch: 85%; }
.custom    { font-variation-settings: "wght" 600, "opsz" 32; }

Block themes

In a block theme, register the variable font in theme.json under settings.typography.fontFamilies with a fontFace entry whose fontWeight is a range ("100 900"). WordPress then offers it in the editor’s typography controls.

With Font Hero

Font Hero supports variable fonts directly: in Fonts → Add Font → Custom Font, upload your file in the Variable tab and Font Hero registers the weight range. You also get font-display, preloading and font stacks for it, and it works with any theme or builder, including Gutenberg’s font picker.

Keep total font weight down with the other techniques in how to reduce font load in WordPress.