Are variable fonts better for performance?

Yes, if you need 3+ weights/styles. One variable font file replaces multiple static files, reducing HTTP requests. A 150KB variable font beats 5x80KB (400KB) static fonts.

Can I subset variable fonts?

Yes. Subset characters like static fonts using FontTools. You can also subset the variation space, limiting the weight range from 100-900 to 400-700, for example.

Do variable fonts load slower than static fonts?

Individual file is larger, but total download is smaller for 3+ weights. First paint may be slightly slower, but total page load is faster. Use font-display: swap for immediate text.

What's the browser support for variable fonts?

95%+ browser support (Chrome 66+, Firefox 62+, Safari 11+, Edge 17+). Only IE11 lacks support and ignores variation settings, falling back to default values.

Should I use variable or static fonts for better Core Web Vitals?

Variable fonts generally improve metrics when using 3+ weights due to fewer HTTP requests and smaller total download. For 1-2 weights, static fonts may be slightly faster.

Variable Fonts Performance

Compare variable font performance against multiple static fonts. Learn when variable fonts improve performance and when they might hurt it.

Key Takeaways

• Variable fonts win when using 3+ weights/styles (single file vs many)
• Static fonts win when using only 1-2 weights
• Variable fonts reduce HTTP requests but may have larger file size
• Browser support is excellent (>95% globally)

In this article

Variable vs Static: File Size Comparison

All file size figures below assume fonts are served in WOFF2 format, which provides the best compression available and is supported by over 96% of browsers. Serving uncompressed TTF or OTF files would make static fonts appear significantly worse in this comparison.

Weights Used	Static Files	Variable File	Winner
1 weight (Regular)	25KB (1 file)	100KB (1 file)	Static
2 weights (Regular + Bold)	50KB (2 files)	100KB (1 file)	Static
4 weights	100KB (4 files)	100KB (1 file)	Variable (fewer requests)
6+ weights	150KB+ (6 files)	100KB (1 file)	Variable

When to Use Variable Fonts

Before adopting a variable font, confirm that your license permits its use across your intended platforms. Variable font licenses sometimes differ from static font licenses for the same typeface. The font modification rights guide explains what to look for when reviewing a variable font license.

Use Variable Fonts

• Need 3+ weights or styles
• Using intermediate weights (450, 550)
• Dynamic weight animations
• Design flexibility is priority

Use Static Fonts

• Only need 1-2 weights
• File size is critical
• Target older browsers
• Using icon fonts

Performance Benefits

Fewer HTTP Requests

One variable font file replaces multiple static files. With HTTP/2, this matters less, but still reduces connection overhead. Use the variable font tester to verify axis behavior and file size before deploying.

Simpler CSS

Single @font-face declaration instead of multiple. Easier to maintain and smaller CSS payload.

Design Flexibility

Use any weight value (100-900), not just predefined weights. Enable smooth weight transitions and responsive typography.

CSS Implementation

@font-face {
  font-family: 'CustomVariable';
  src: url('/fonts/custom-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Use any weight */
h1 { font-weight: 700; }
h2 { font-weight: 600; }
p { font-weight: 400; }

/* Smooth weight transitions */
.hover-bold:hover {
  font-weight: 700;
  transition: font-weight 0.3s;
}

Additional Resources

For a detailed feature-by-feature breakdown, the static vs variable fonts comparison covers browser support, tooling, licensing, and performance characteristics side by side.

Variable Fonts Guide

Complete variable fonts tutorial

WOFF vs WOFF2

Format comparison

Convert Your Fonts

Convert static fonts to WOFF2 or explore variable font options.

Convert Fonts Now

Written & Verified by

Sarah Mitchell

Typography expert specializing in font design, web typography, and accessibility