Variable Fonts Explained: How to Detect Them on Any Website
Patrick Bushe
April 27, 2025 · 5 min read
A variable font is a single font file that contains a whole range of styles. Instead of separate files for light, regular, bold and every weight between, one file can produce any weight along a scale, and often other changes too. Variable fonts arrived with the OpenType 1.8 specification in 2016 and now work in all major browsers.
Axes: what can vary
Each kind of variation is called an axis. The standard ones are:
- Weight (
wght): thin to black. - Width (
wdth): condensed to wide. - Slant (
slnt) and italic (ital). - Optical size (
opsz): small sizes get sturdier shapes, large sizes get finer detail.
Font designers can add their own axes too, such as roundness.
Why sites use them
- Fewer files: one file instead of several can mean faster loading. See font loading performance.
- Finer control: weights such as 450 or 650, not just 400 and 700.
- Responsive type: adjusting width or weight for small screens.
- Animation: smoothly changing weight on hover.
Many popular fonts have variable versions, including Inter, Roboto Flex and many on Google Fonts.
How to tell if a site uses one
- Firefox DevTools: right-click text → Inspect, then open the Fonts panel. Variable fonts show their axes with sliders you can drag to preview.
- Chrome DevTools: in the Styles pane, look for
font-variation-settings, or an@font-facerule with a weight range such asfont-weight: 100 900. The Computed tab's "Rendered Fonts" shows which font is actually used. - Network tab: filter by Font. A single file serving every weight on the page is a strong hint; file names often include "variable" or "VF".
- Font inspector sites: upload a font file to a tool such as Wakamai Fondue to see its axes and features.
See checking whether a font supports variable weight.
A quick hint
Font Detector shows the font family, size, weight, style and line height of any text you click. It doesn't list a font's axes, but an in-between weight such as 450 or 550 is a good sign the site uses a variable font. Then confirm with the DevTools steps above.
Using them yourself
In CSS, set weights with font-weight as usual; use font-variation-settings only for custom axes. Check the license, and subset the font to the characters you need to keep the file small. See Google Fonts pairings.
