Variable Fonts: One File to Rule Them All

What are variable fonts?

Traditional (static) fonts work like this: one file per style. Want Inter Regular? That's one file. Inter Bold? Another file. Inter Italic? Yet another. A comprehensive font family with 9 weights and italic variants means 18 separate files.

Variable fonts flip this. A single font file contains the entire design space. One file gives you every weight from Thin (100) to Black (900), and potentially width, italic, and optical size variations too.

Think of it this way: static fonts are individual photos. Variable fonts are a video that you can pause at any frame.

How variable fonts work technically

Variable fonts use "axes of variation." Each axis represents one adjustable property:

• wght (weight): Thin to Black, typically 100-900
• wdth (width): Condensed to Expanded, typically 75-125
• ital (italic): Upright to Italic, 0 or 1
• slnt (slant): Similar to italic but with a continuous range
• opsz (optical size): Adjusts design details based on display size

You control these axes in CSS:

/* Static font approach: need multiple files */
font-weight: 400; /* loads inter-regular.woff2 */
font-weight: 700; /* loads inter-bold.woff2 */

/* Variable font approach: one file, any value */
font-variation-settings: 'wght' 450; /* not possible with static fonts */
font-weight: 632; /* any value between 100-900 */

The magic is in that 632. With static fonts, you're limited to predefined steps (400, 500, 600, 700). With variable fonts, you get continuous values. Want weight 547? Sure.

The performance case

Let's compare real numbers for the Inter font family:

Static approach (4 weights):

• Inter-Regular.woff2: ~25KB
• Inter-Medium.woff2: ~25KB
• Inter-SemiBold.woff2: ~25KB
• Inter-Bold.woff2: ~25KB
• Total: ~100KB, 4 HTTP requests

Variable approach:

• Inter-Variable.woff2: ~100KB
• Total: ~100KB, 1 HTTP request

Same total file size, but 75% fewer HTTP requests. On HTTP/1.1 connections (still common on mobile), each request has overhead for TCP handshake, TLS negotiation, and headers. Fewer requests means faster load.

But here's where variable fonts really shine: if you need 6+ weights, the variable font is actually smaller because static files would total 150KB+ while the variable file stays at ~100KB.

And you're not limited to just weight. A single variable font with weight AND width axes replaces what would be 20+ static files.

Best variable fonts on Google Fonts (2026)

Here are the standout variable fonts available for free, sorted by what they're best at:

For body text:

• Inter — The workhorse. Weight 100-900, massive language support. Used by linear.app, Vercel, and half the internet.
• DM Sans — Slightly more personality than Inter. Clean geometric with good readability. Weight 100-1000.
• Plus Jakarta Sans — Warm, friendly, slightly rounded. Great for consumer products. Weight 200-800.
• Lexend — Designed specifically for reading proficiency. Research-backed. Weight 100-900.

For headings:

• Sora — Geometric, bold, techy. Weight 100-800. Works beautifully with serif body fonts.
• Space Grotesk — Monospaced DNA in a proportional font. Distinctive without being weird. Weight 300-700.
• Outfit — Clean, modern, slightly geometric. Weight 100-900. Versatile for both headings and body.

For editorial/display:

• Fraunces — An "old style" variable font with WONK and SOFT axes. Wild customization options.
• Recursive — Mono to sans-serif on a continuous axis. Genuinely innovative.
• Cabinet Grotesk — Bold, editorial feel. Not on Google Fonts but worth checking on Fontshare.

Using variable fonts in CSS

The syntax is straightforward:

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

/* Then use it like normal CSS */
h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
p  { font-weight: 400; }

/* Or use font-variation-settings for more control */
.custom { font-variation-settings: 'wght' 450, 'wdth' 95; }

With Google Fonts, just add the weight range to the URL:

https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap

Note the 100..900 range syntax instead of listing individual weights.

Variable fonts and animation

One genuinely cool thing: since variable font properties are continuous, you can animate them smoothly with CSS transitions:

.text-hover {
  font-weight: 400;
  transition: font-weight 0.3s ease;
}
.text-hover:hover {
  font-weight: 700;
}

This creates a smooth weight animation that's impossible with static fonts (which would snap between weights). It's a subtle effect that adds polish to interactive elements.

Browser support

Variable fonts are supported in all modern browsers since 2020. Safari, Chrome, Firefox, Edge all handle them without issues. The only holdouts are very old browser versions that are well below 1% of global traffic.

You can still serve static fonts as a fallback using @supports:

/* Fallback for ancient browsers */
@font-face { font-family: 'Inter'; src: url('Inter-Regular.woff2'); font-weight: 400; }
@font-face { font-family: 'Inter'; src: url('Inter-Bold.woff2'); font-weight: 700; }

/* Variable font for modern browsers */
@supports (font-variation-settings: normal) {
  @font-face { font-family: 'Inter'; src: url('Inter-Variable.woff2') format('woff2-variations'); font-weight: 100 900; }
}

Getting started

The easiest way to explore variable fonts in action is to browse the Font Pairing Gallery. We indicate which fonts support variable format so you can prioritize them for your projects.

Variable fonts aren't just a performance optimization. They're a design tool. The ability to fine-tune weight, width, and other properties gives you precision that static fonts simply can't match. Once you start using them, going back to static fonts feels like going from a dimmer switch to an on/off toggle.