How to Check if a Font Supports Variable Weight
Patrick Bushe
April 13, 2025 ยท 5 min read
A variable font holds a range of weights, and sometimes widths or other styles, in a single file. Instead of separate files for Regular, Medium and Bold, you get every weight in between, such as 450 or 650. Here's how to check whether a font is variable and what range it covers.
On Google Fonts
- Use the filter for variable fonts in the font list.
- On a font's page, variable fonts show sliders for their axes, such as Weight with its range (for example 100 to 900).
- When you select the font, the embed code includes a weight range such as
wght@100..900.
On a website
- Check the CSS. In DevTools, look at the
@font-facerule. A range likefont-weight: 100 900means a variable font. A single value means a static weight. - Check the files. In DevTools โ Network โ Font, a single font file serving every weight suggests a variable font. Separate files per weight mean static fonts.
- Check the weight in use. Font Detector shows the font weight of any text you click. Unusual values like 450 or 550 are a strong sign of a variable font.
A quick in-browser test
- Right-click text set in the font and choose Inspect.
- In the Styles panel, change
font-weightto 400, then 450, then 500. - If the text gets gradually bolder at each step, the font is variable. If 450 looks the same as 400 or 500, it's snapping to the nearest static weight.
Inspect a font file directly
If you have the file, a font inspector such as Wakamai Fondue (drag the file onto the page) shows its axes, weight range and other features. Desktop font managers show the same information.
Why variable fonts are worth it
- Fewer files: one download instead of several, often smaller overall when you use three or more weights.
- Finer control: pick the exact weight that looks right, for example slightly heavier text in dark mode.
- Smooth effects: weight can change smoothly on hover or with screen size.
Most current browsers support them well. Keep a sensible fallback font in your font stack in case the file fails to load. For choosing weights, see the best font weights for screens.