Variable fonts are the single most useful typographic technology that most designers haven't fully adopted yet. We build templates for startups and agencies, and we see the same pattern: teams load six to ten separate font files for a single type family, then wonder why their page speed scores suffer. Variable fonts solve this by packing an entire weight range into one file, and the design implications go far beyond performance.
This guide explains what variable fonts are, how the axes work, what performance gains you can expect, and how to implement them in CSS and Framer. If you are new to the topic, start with the definition. If you are deciding whether to switch an existing project, jump to the performance and compatibility sections.
What are variable fonts, and why do they matter?
A variable font is a single font file that contains multiple design variations within it. Instead of loading separate files for light, regular, medium, and bold, you load one file and use CSS to request any weight in the range. The same file also supports width axes, slant, and custom axes like optical size. This matters for two reasons: performance and design freedom. On the performance side, fewer HTTP requests and smaller total transfer weight mean faster page loads. On the design side, you can use weights that don't exist in the static family, like 437 or 682, to create subtle hierarchy that looks bespoke. The technology is not new, OpenType 1.8 introduced it in 2016, but browser support and design tool adoption have only recently made it practical for production work.
How do variable font axes work?
Axes are the dimensions of variation inside a variable font. The most common is weight (wght), typically ranging from 100 to 900. Width (wdth) runs from condensed to expanded. Italic (ital) is often a binary switch, but some fonts use a slant axis (slnt) for continuous angles. Optical size (opsz) automatically adjusts letterforms for better readability at small sizes and more elegance at large ones. Custom axes can include grade, ascender height, or anything the type designer invents. You access these values in CSS with font-variation-settings: 'wght' 450, 'wdth' 85. In Framer, you select the variable font and adjust the sliders in the typography panel. The concept is simple: one file, infinite gradations along each axis.
What performance gains do variable fonts actually deliver?
The gains are real but depend on your current setup. If you are loading four to six static weights of a type family, a variable font will almost always reduce your total font payload. The single file is larger than any one static weight, but smaller than the combined set. You also save HTTP requests, which matters more than raw file size on slower connections. The bigger win is caching: one file covers every weight you might need, so subsequent page loads don't request new font files. Where the savings shrink is if you only use one or two weights. In that case, the variable file might be larger than the static files you would have loaded. For most modern sites using three or more weights, variable fonts are the more efficient choice.
Here is a direct comparison:
| Factor | Static Fonts | Variable Fonts |
| File count | Multiple files | One file |
| Total weight | Sum of all files | Often smaller than combined statics |
| HTTP requests | One per weight | One total |
| Weight precision | Fixed steps (400, 700) | Continuous range (100 to 900) |
| Browser support | Universal | Modern browsers only |
| Design tool support | Universal | Broad, growing |
| Caching efficiency | Separate files per weight | One file covers all weights |
Which browsers and design tools support variable fonts?
Variable fonts are supported in all modern browsers: Chrome, Firefox, Safari, and Edge. Internet Explorer does not support them, but its market share has fallen below the threshold where most teams consider it. On the design tool side, Figma has supported variable fonts since 2022. Adobe Illustrator and Photoshop handle them well. Sketch's support is more limited. For web builders, Framer supports variable fonts through Google Fonts integration and custom font uploads. Before you commit to a variable font for a project, test it in your target design tools and in the browsers your audience uses. Support is broad enough that compatibility is rarely a blocker, but it is worth verifying for edge cases. For deeper technical detail, web.dev has excellent coverage of variable font implementation and performance profiling.
How to use variable fonts in CSS and Framer
In CSS, you load a variable font the same way you load any other web font, but you use font-variation-settings to control the axes. For example: font-variation-settings: 'wght' 450, 'wdth' 100. You can also use the standard font-weight property if the font registers its weight axis properly, which most modern variable fonts do. In Framer, you add a variable font from Google Fonts or upload a custom file, then use the weight slider in the typography panel to set any value in the range. For optical size, Framer will use the opsz axis automatically if the font supports it. The practical difference is that you stop thinking in discrete steps like 'bold' and start thinking in continuous values. That takes some adjustment, but the precision is worth it.
When should you still use static fonts?
Variable fonts are not always the right choice. If your project only needs one or two weights, static files are often smaller and simpler. Some variable fonts have rendering issues at extreme weights or widths, producing odd spacing or distorted letterforms. For client projects where you hand off a site to a non-technical editor, static weights are easier to explain: 'use regular or bold' is clearer than 'set the wght axis to 437.' And if your font of choice does not have a variable version, there is no compromise. IBM Plex Sans, for example, has a variable version, but many niche typefaces do not. Our advice: default to variable fonts for new projects, but keep static files in your toolkit for simple sites and legacy support. If you are building a type system from scratch, our free fonts for UI guide covers static families that pair well with variable options.
Frequently asked questions
What is the difference between a variable font and a static font?
A static font contains one fixed design, like Regular or Bold. A variable font contains a design space with axes that let you interpolate between extremes, giving you hundreds of possible variations from one file.
Do variable fonts work on mobile devices?
Yes. All modern mobile browsers support variable fonts, and the performance benefits are even more noticeable on mobile networks where reducing HTTP requests matters. Test on actual devices, as some older Android browsers may have limited support.
Can I use variable fonts with Framer?
Yes. Framer supports variable fonts through Google Fonts and custom uploads. You can adjust weight, width, and other axes directly in the typography panel. For most projects, the workflow is identical to using static fonts, with the added benefit of continuous weight control.
Start using variable fonts on your next project
The barrier to using variable fonts is essentially gone. Browser support is universal among modern tools. The Google Fonts catalog includes dozens of variable families. Framer handles them natively. If you are currently loading four or more weights of a type family, switching to the variable version will shrink your font payload and give you finer control over hierarchy. Start with one project. Pick a variable font from our Google Font pairings guide, test it in your layout, and measure the before and after load times. Once you see the results, you won't go back. For more on building type systems that perform, our fonts for SaaS websites covers the full stack from selection to implementation. And if you're building on Framer, our SaaS templates and startup templates already use variable fonts where they make sense.
