What Variable Fonts Are
A variable font is a single font file that contains an entire range of weights, widths, or other stylistic variations along continuous axes. Instead of downloading separate files for regular, medium, semibold, and bold — each a distinct HTTP request — a variable font delivers all of those weights in one file.
This matters for performance because font requests add up quickly. A typical site using Inter in four weights (400, 500, 600, 700) with both regular and italic styles would need eight separate WOFF2 files. The variable font version of Inter covers all weights from 100 to 900 in a single file — around 95KB compared to roughly 80–100KB total for four individual static files. The savings are less about raw file size and more about eliminating multiple HTTP requests and the browser’s per-request overhead.
How Variable Fonts Reduce Requests
Each font file the browser downloads requires a separate HTTP request. Even with HTTP/2 multiplexing, there is per-request overhead: parsing, decompression, and font loading API processing. For sites loading four or more font files, switching to a variable font typically eliminates three or more requests from the critical rendering path.
The impact is most noticeable on mobile connections where latency is high. Saving three requests at 50–100ms each means text appears 150–300ms sooner. When text is the LCP element, that directly improves your Core Web Vitals.
When Variable Fonts Make Sense
Variable fonts offer the most benefit when:
- You use three or more weights — consolidating two weights into one variable file saves one request. Consolidating five weights saves four. The more weights you use, the bigger the win.
- You need design flexibility — variable fonts let you use intermediate weights (like 450 or 550) that do not exist as separate static files. This is a design benefit more than a performance one, but it comes free.
- You are self-hosting fonts — variable fonts pair naturally with self-hosting since you have full control over which files are served.
When They Do Not Help
If your site uses a single font family in only one or two weights, a variable font file may actually be larger than the equivalent static files. Variable fonts include the interpolation data for the entire axis range, which adds overhead that only pays off when you are using multiple points along that axis.
Also, not every font family offers a variable version. If you are using a font that only ships as static files, the advice is straightforward: minimize the number of weights and styles you load rather than switching fonts purely for the variable format.
Browser Support and Implementation
Variable fonts are supported in all modern browsers — Chrome, Firefox, Safari, and Edge. Browser support has been universal since roughly 2020, so compatibility is no longer a practical concern.
In CSS, variable fonts use the same @font-face syntax with the addition of axis ranges. Instead of font-weight: 400, you declare font-weight: 100 900 to indicate the full range available. The browser then interpolates to whatever weight you specify in your stylesheets.
Further Reading
- Introduction to variable fonts on the web (web.dev) — Comprehensive guide to variable font axes, CSS implementation, and performance benefits.
- Variable fonts guide (MDN) — Technical reference for CSS variable font properties and axis configuration.