Quick wins for a faster PC:
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →
ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
A variable font is one font file that can express a range of designed styles—such as weight, width, slant, and optical size—through adjustable axes. Instead of loading separate files for Regular, Medium, Bold, and Condensed, a website or design application can request different points within the font’s supported design space.
Static fonts versus variable fonts
Traditionally, each font style is delivered as a separate file:
Regular.woff2
Medium.woff2
Bold.woff2
Black.woff2
Condensed.woff2A variable font can combine several of those variations in one resource. The browser or operating system derives the requested instance from the font’s variation data.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitches| Static font family | Variable font family |
|---|---|
| Usually one file per style | One file can contain several designed styles |
| Discrete values such as 400 or 700 | Continuous values within supported ranges |
| Simple and predictable | More flexible, but more complex |
| Can be smaller when only one style is needed | Can reduce resources when many styles are required |
Variable fonts are not fonts with unlimited or arbitrary styles. Their capabilities are bounded by the axes and design space created by the type designer. A family may contain only a weight axis, or it may include weight, width, slant, optical size, and custom axes.
#1 Best Overall
How variable fonts work
Variable fonts use the OpenType Font Variations technology introduced in OpenType 1.8. The OpenType variations overview explains the general model, while the fvar specification describes the table that records axes and named instances.
- Masters: Key source designs, such as Light, Regular, and Bold.
- Axes: Dimensions along which the design can change.
- Instances: Named or user-selected points in the design space.
- Interpolation: The calculation used to derive an intermediate design between masters.
- Axis tags: Four-character identifiers such as
wghtandwdth.
Interpolation does not guarantee that an intermediate value is optically identical to a separately drawn static font. Type designers may use substitutions, nonlinear interpolation, and special adjustments to preserve quality at important points. Weight, spacing, kerning, and glyph shapes still need testing across the range.
The main variable-font axes
| Axis | Meaning | Typical CSS control |
|---|---|---|
wght |
Weight | font-weight |
wdth |
Width | font-stretch |
slnt |
Slant angle | font-style: oblique with an angle where supported |
ital |
Upright/italic switch | font-style: italic |
opsz |
Optical size | font-optical-sizing |
These are registered axes, not a checklist that every variable font must implement. The font’s metadata defines which axes exist, their defaults, and their minimum and maximum values. A true italic and a slant are also different: an italic may redraw letterforms substantially, while a slant often leans the underlying design.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteCustom axes
Some fonts include designer-defined axes, identified by four-character tags. For example:
.display {
font-family: "Example Variable", sans-serif;
font-variation-settings:
"MONO" 1,
"CASL" 0.5,
"CRSV" 1;
}These tags are only illustrative unless the selected font specifically defines them. Always check the font’s documentation or metadata for the exact tag, default, and supported range.
Using a variable font on the web
Start with a normal @font-face rule. Declare the actual ranges supported by the font:
@font-face {
font-family: "Example Variable";
src: url("/fonts/example-variable.woff2") format("woff2");
font-weight: 300 900;
font-stretch: 80% 120%;
font-style: normal;
font-display: swap;
}
:root {
font-family: "Example Variable", system-ui, sans-serif;
}
.headline {
font-weight: 760;
font-stretch: 92%;
font-size: clamp(2rem, 7vw, 6rem);
line-height: 0.95;
}
.body-copy {
font-weight: 430;
max-width: 65ch;
line-height: 1.5;
}The range declaration tells the browser which values this face supports. Do not declare font-weight: 1 1000 unless the font genuinely supports that range. If the font supports an oblique axis, the descriptor can include its real angle range:
@font-face {
font-family: "Example Variable";
src: url("/fonts/example-variable.woff2") format("woff2");
font-weight: 200 900;
font-style: oblique 0deg 12deg;
font-display: swap;
}For registered axes, prefer semantic CSS properties:
Rank #2
.hero {
font-family: "Example Variable", sans-serif;
font-weight: 650;
font-stretch: 92%;
font-style: normal;
}This communicates intent clearly and works better with browsers, tools, and future maintainers. The MDN variable-font guide documents range-valued descriptors and common CSS controls.
When to use font-variation-settings
font-variation-settings is the low-level control for custom axes or special cases where a four-character axis tag is necessary:
.display {
font-family: "Example Variable", sans-serif;
font-variation-settings: "XTRA" 500;
}The axis tag must be exactly four ASCII characters, and the value must fall within the font’s supported range. See MDN’s documentation for font-variation-settings.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Use care when mixing low-level and high-level declarations. An explicit font-variation-settings value can override a corresponding property such as font-weight. Avoid contradictory declarations, or include all required low-level axis values deliberately:
.headline {
font-weight: 720;
font-stretch: 90%;
font-variation-settings:
"opsz" 48,
"GRAD" 25;
}Responsive typography
Variable fonts can adjust typography for layout context without switching among many font files. For example, a headline can become slightly narrower on small screens:
:root {
--headline-weight: 760;
--headline-width: 100%;
}
h1 {
font-family: "Example Variable", system-ui, sans-serif;
font-weight: var(--headline-weight);
font-stretch: var(--headline-width);
line-height: 0.95;
}
@media (max-width: 40rem) {
h1 {
--headline-weight: 680;
--headline-width: 92%;
}
}Continuous variation is optional. Discrete breakpoints are often easier to test and maintain. Changing width or weight can change line breaks, text height, and perceived density, so check the result at real content lengths and target screen sizes.
Performance: are variable fonts smaller?
Not automatically. A variable font can reduce requests and total transfer when it replaces several static styles, but a single variable file may be larger than one static file. Size depends on the number of axes, glyph coverage, hinting, compression, subsetting, and the styles the site actually uses.
Recommended Free Tools
For a meaningful comparison, measure production WOFF2 files after compression and compare:
Rank #3
- Used Book in Good Condition
- One static style.
- All static styles required by the site.
- One variable font containing the required axes.
- A subsetted variable font covering only the necessary scripts and characters.
Use unicode-range when serving separate language or script subsets where appropriate. The CSS Fonts Module Level 4 specification describes how applicable font rules affect downloads. Use font-display deliberately and test the fallback transition rather than judging performance from file count alone.
Benefits beyond file consolidation
- Fewer declarations: One family can cover several weights and widths.
- Precise control: Values such as
font-weight: 437orfont-stretch: 96%may be useful when supported and visually appropriate. - Responsive type: Headlines can become narrower or lighter at a breakpoint.
- Smoother transitions: Axis values can be animated for interfaces or display typography, although animation should be used sparingly.
- Context-sensitive design: Optical size, grade, or width can be adjusted for a particular display size or layout.
Limitations and trade-offs
- Quality varies by font: Interpolation can expose spacing, rhythm, or shape problems at extreme or unusual settings.
- No arbitrary typefaces: A variable font cannot create a true condensed cut, italic, alternate glyph style, or optical-size redesign unless the designer included it.
- More combinations to test: Multiple axes create a large design space. Test representative combinations, not only endpoints.
- Uneven application support: Modern browsers broadly support the main CSS mechanisms, but older operating systems, design applications, export formats, and font editors may expose fewer controls.
- Licensing complexity: Desktop use, web hosting, app embedding, e-books, video, client delivery, server-side rendering, and user-generated content may require different rights.
Using variable fonts in design applications
A variable font works in a desktop application only when the operating system, application, and font engine support the relevant technology. Older software may show only named instances or treat the family like a conventional font.
- Install the variable font.
- Select it in an application that supports variable fonts.
- Open the application’s variable-font or format controls.
- Adjust available controls such as weight, width, slant, or optical size.
- Check whether the application preserves live variation settings during export.
- Test the file in the destination application; exporting may create a static instance or discard custom-axis data.
Menu names differ by application and version, so do not assume that Photoshop, Illustrator, InDesign, Figma, or an operating system exposes the same controls.
Where to find or create variable fonts
Google Fonts
Google Fonts is a practical free source for experimentation and many production sites. Not every family is variable, and families do not necessarily expose every axis through hosted CSS.
- Choose a family.
- Select the styles or axis ranges you need.
- Copy the generated link or CSS.
- Inspect the resulting
@font-facerules. - Confirm the actual axes, ranges, language subsets, and browser behavior.
Adobe Fonts
Adobe Fonts is integrated with eligible Creative Cloud subscriptions. Access depends on the plan and the Creative Cloud desktop application; see Adobe’s system and subscription requirements.
Do not assume activation grants unrestricted self-hosting, app embedding, redistribution, or delivery of font files to clients. Check the license for the specific family and use. Adobe’s displayed pricing varies by region, plan, billing arrangement, and promotion.
Authoring tools
If you need to create or technically edit variable fonts rather than merely use one, FontLab 8 is a professional Mac and Windows font editor with variable OpenType, web-font, and WOFF2 workflows. It is aimed at type designers, foundries, and agencies—not developers who only need to load an existing font.
FontForge is a free, open-source alternative suited to learners and open-source projects, though its workflow may be less polished or integrated.
Rank #4
Troubleshooting variable fonts
The fallback font appears
- Check the font URL and the network response.
- Confirm the server sends a usable font MIME type.
- Check for CORS errors.
- Match the
font-familyname exactly. - Verify that the file is actually variable.
- Confirm that the requested value is inside the declared range.
- Check the browser console for decoding or network errors.
Temporarily remove font-variation-settings, test font-weight: 400, and confirm that the file contains the characters you are rendering. A known-good WOFF2 variable font can help separate a CSS problem from a damaged or incompatible font file.
The font loads but an axis does nothing
Common causes include a missing axis, a misspelled tag, a tag that is not exactly four characters, an out-of-range value, conflicting declarations, a different @font-face rule being selected, or an application having converted the font to a static instance.
Compare clearly different test values:
.test {
font-family: "Example Variable";
font-variation-settings: "wght" 300;
}
.test {
font-family: "Example Variable";
font-variation-settings: "wght" 900;
}If the result is identical, inspect the font metadata and the browser’s computed styles.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsWeights are ignored or snapped
The declared CSS range must match the font’s real range. A font supporting 400–700 cannot produce a genuine 850 instance. Use the exact metadata-defined range.
Layout changes unexpectedly
Weight, width, optical size, and font loading can alter line breaks, baseline appearance, vertical metrics, and cumulative layout behavior. Use a stable fallback strategy, test font-display, and avoid relying on one exact line break unless the design tolerates loading differences.
The font looks blurry or inconsistent
Possible causes include poor hinting, platform-specific rasterization, an extreme axis value, a font not optimized for small sizes, or browser and operating-system differences. Test at actual target sizes on representative platforms rather than judging only from a large desktop preview.
Accessibility and responsible use
- Prefer readable weight, width, contrast, and line spacing over novelty.
- Test very light, narrow, and condensed settings at realistic text sizes.
- Measure text blocks again after changing weight or width.
- Avoid animating large amounts of body text across multiple axes.
- Subset to required scripts where appropriate.
- Test fallback transitions and real loading conditions.
When static fonts are the better choice
Choose static files when:
- The site needs only one style and the static file is smaller.
- The target platform is old or tightly constrained.
- The design depends on separately art-directed static cuts.
- The application cannot preserve variation data.
- The licensing terms prohibit the intended variable-font delivery.
- The variable family’s quality, language coverage, or compatibility is inadequate.
Practical decision checklist
- List the weights, widths, scripts, and styles the project actually needs.
- Inspect the font’s axes, defaults, and true supported ranges.
- Confirm web, desktop, app, client-delivery, or embedding rights.
- Compare real static and variable WOFF2 files after subsetting and compression.
- Use semantic properties such as
font-weight,font-stretch, andfont-stylefirst. - Use
font-variation-settingsonly for custom axes or deliberate low-level control. - Test representative axis combinations on target browsers, devices, and design applications.
For specifications and compatibility details, consult the MDN reference, the MDN variable-font guide, and the W3C CSS Fonts specification.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
