Variable Fonts Explained — One File, Every Weight

A typical web project loads Regular, Bold, Italic, and Bold Italic — four separate font files. Maybe add Light and Semibold and you're at six. Each one is 20-40 KB. That's 120-240 KB of fonts before a single word renders.

Variable fonts collapse all of that into one file. One file that contains every weight, every width, and potentially every style along a continuous spectrum.

How They Actually Work

Traditional fonts (called "static" fonts) are individual snapshots. Regular is one file. Bold is another. There's nothing in between except what you load separately.

A variable font defines the extremes — say, Thin (weight 100) and Black (weight 900) — and the math to interpolate between them. The font file contains the outline data plus instructions for how those outlines morph as you slide along an axis.

Want weight 450? The font calculates it on the fly. Weight 637? Sure. You're not limited to the named stops anymore.

The Axes

Variable fonts have one or more axes of variation. The most common:

Axis	Tag	What It Controls
Weight	wght	Thin to Black (100-900)
Width	wdth	Condensed to Expanded
Italic	ital	Upright to Italic (binary)
Slant	slnt	Degree of slant (continuous)
Optical Size	opsz	Adjustments for different text sizes

Some fonts also have custom axes. Recursive has a "Casual" axis. Roboto Flex has Grade. The possibilities are open-ended.

Using Them in CSS

@font-face {
  font-family: 'Inter';
  src: url('Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

h1 {
  font-weight: 720;  / not 700, not 800 — exactly 720 /
}

.subtle {
  font-weight: 340;
}

The font-weight: 100 900 in the @font-face declaration tells the browser this single file covers that entire range. Then you can use any value within it.

For custom axes, use font-variation-settings:

.text {
  font-variation-settings: 'wght' 450, 'wdth' 85;
}

File Size Savings

This is the headline feature for web performance. Real numbers from Inter:

• Static files (Regular + Medium + Semibold + Bold + Italic): ~180 KB total
• Variable file (all weights, no italic): ~95 KB

You get infinitely more typographic options in roughly half the download size. The savings scale with how many weights and styles you'd otherwise load.

The break-even point is usually around 3 static files. If you only need Regular and Bold, two static files might be smaller than one variable file. But the moment you add a third weight, variable wins.

Browser Support

Every modern browser supports variable fonts. Chrome, Firefox, Safari, Edge — all of them, going back to versions from 2018. Global support is above 95%.

The only holdouts are extremely old browsers and some embedded webviews. If your audience includes those, the fallback is simple: variable fonts degrade to the closest defined weight. A browser that doesn't understand font-weight: 450 will round to 400.

Where to Get Them

Google Fonts has been pushing variable fonts hard. Most popular families (Inter, Roboto, Open Sans, Montserrat) have variable versions available. Font Squirrel hosts some variable fonts with clear licensing. Adobe Fonts includes variable fonts in Creative Cloud subscriptions.

When downloading, look for files with "Variable" or "VF" in the name. The file extension is the same (.ttf, .woff2) but the file contains the variation data internally.

Worth the Switch?

If you're starting a new project: absolutely. There's no reason to use static fonts when variable versions exist for your chosen typeface.

If you're maintaining an existing site: evaluate whether you're loading 3+ font files. If yes, switching to a variable font is a quick performance win with minimal effort.

Related Tools

• WOFF to WOFF2 Converter — Compress font files for the web
• EOT to WOFF Converter — Migrate legacy font formats
• TTF to WOFF2 Converter — Convert desktop fonts for web use