What Are Variable Fonts?

One File, Many Looks

A variable font is one font file that holds many styles inside it. A normal font file gives you just one look — like "bold" or "regular." A variable font gives you a whole rainbow of looks in a single file.

Think of it like a coloring book. With a regular font, you have one picture already colored in. With a variable font, you have one picture and a set of sliders — you can slide them around to make the picture thicker, thinner, wider, or skinnier. The letters change shape smoothly, like clay you can squish and stretch.

That means a designer can make a heading huge and thick, the subtitle medium and slanted, and the body text small and clean — all using one single file. One download, hundreds of options.

Faster Sites, Smoother Designs

Variable fonts are a big deal for websites and apps. Before they existed, if a designer wanted five different looks, they had to load five different font files. That made websites slower because the browser had to download all of them — sometimes megabytes of fonts, even for a short article.

With variable fonts, you load one file and you have all the looks inside. Your website loads faster, uses less data, and looks great on every screen size. Designers can also make text change smoothly when you scroll or hover — like making a word grow bigger and bolder as you read it, no flicker, no waiting.

This matters for everyone who uses the web. Faster websites work better on phones, in countries with slow internet, and on older devices. Variable fonts help the web feel snappy and friendly, even on a slow connection.

Sliders Called Axes

Variable fonts work using something called "axes." An axis is a slider for one feature of the font. Move the slider, and the letters change.

The two most common axes are:

• Weight — how thick or thin the letters are. You can slide from super skinny to extra bold.
• Width — how squished or stretched the letters are. You can make them tall and narrow, or short and wide.

Some variable fonts have even more axes, like:

• Italic — how slanted the letters are, on a smooth scale.
• Optical size — how the font changes when it's small (a tiny caption) versus huge (a giant banner).
• Custom axes — designers can invent their own sliders for fun, unique effects.

Under the hood, the font file stores the shape of the letters as a math formula. When you change a slider, the formula adjusts — smooth, easy, and instant. No new files to download, no waiting.

Using a Variable Font in CSS

In CSS, using a variable font looks like this. You load the font once, then pick a weight number when you use it:

/* Load the variable font once */
@font-face {
  font-family: 'MyFont';
  src: url('my-variable-font.woff2') format('woff2-variations');
}

/* Use the 'wght' (weight) axis from 100 to 900 */
.heading {
  font-family: 'MyFont';
  font-variation-settings: 'wght' 700;  /* Bold */
  font-size: 48px;
}

.body-text {
  font-family: 'MyFont';
  font-variation-settings: 'wght' 400;  /* Regular */
}

You can even animate the changes. Here's how you make a word slowly get bolder when someone hovers over it:

.fancy-link {
  font-family: 'MyFont';
  font-variation-settings: 'wght' 300;
  transition: font-variation-settings 0.3s ease;
}

.fancy-link:hover {
  font-variation-settings: 'wght' 800;
}

When the user hovers, the font smoothly slides from thin to bold — one file, no extra downloads, no flash. Try it on your own site.

Knowledge Check

Test what you learned with this quick quiz.