A variable font is a single font file that contains multiple stylistic variations — such as weight, width, slant, and optical size — all controllable via axes. Instead of loading separate files for Regular, Bold, Condensed, etc., one variable font can produce a continuous spectrum of styles, reducing file size and improving page performance.

The most common registered axes are: wght (weight, typically 100–900), wdth (width, e.g. 50–150), opsz (optical size, 6–144), slnt (slant, 0–12°), and ital (italic, 0–1). Some fonts also include custom axes like GRAD (grade), CASL (casualness), or MONO (monospace).

Use the font-variation-settings CSS property. For example: font-variation-settings: 'wght' 700, 'wdth' 85;. Alternatively, for the wght axis, you can use the standard font-weight property, and for slnt you can use font-style: oblique.

Variable fonts are supported in all modern browsers: Chrome 66+, Firefox 62+, Safari 11+, and Edge 17+. They cover over 97% of global web traffic, making them safe for production use with appropriate fallbacks.

Use this tool! Upload your font and it will detect the fvar table inside the file. If axes appear, it's a variable font. You can also check the file size — variable font files tend to be larger than individual static instances but smaller than a full static family combined.

Yes! Google Fonts offers many variable fonts. When embedding via their CDN, specify axis ranges in the URL. For example: https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900. This tool includes several presets to explore popular Google variable fonts.