What is a variable font and how does it work?

A variable font is a single font file that contains an entire type family with infinite stylistic variations along one or more axes (such as weight, width, slant, or optical size). Using CSS font-variation-settings or custom properties, you can set any value along each axis — e.g. font-weight: 375 — instead of being limited to pre-defined weights like 400 or 700. This enables smooth typographic transitions, responsive weight scaling, and significant file-size savings.

What are the standard variable font axes?

The five registered OpenType variable font axes are: wght (Weight, 100–900), wdth (Width, condensed to expanded), ital (Italic, 0–1), slnt (Slant, degrees), and opsz (Optical Size, adjusts design for different pt sizes). Many fonts also include custom axes — e.g. Inter's Grade axis, Recursive's MONO axis (switching between proportional and monospace), and Amstelvar's extensive parametric axes.

Do variable fonts improve website performance?

Yes, significantly. A variable font replacing a 4-weight family (Regular, Medium, Bold, ExtraBold) can reduce total font payload by 50–80%. For example, Inter Variable is ~370 KB and replaces multiple separate weight files totalling 800+ KB. Additionally, variable fonts support subsetting, WOFF2 compression, and the display=swap performance attribute — all combining for measurable Core Web Vitals improvements.

Variable Font Generator

Preview and test variable fonts with live weight axis control. Drag from Thin (100) to Black (900), see continuous rendering, and export CSS font-variation-settings instantly — free.

script

Kimberly Geswein · 1 weights

Your text here

Specimen →

400w

Variable Fonts & CSS: The Complete Implementation Guide

Variable fonts unlock new CSS capabilities for responsive, animated typography:

CSS font-variation-settings

Use font-variation-settings: 'wght' 650 to set exact intermediate weights unavailable in static fonts. Combine multiple axes: 'wght' 650, 'wdth' 85.

Responsive Weight Scaling

Use CSS custom properties with media queries to fluidly scale font weight: thinner on mobile (400), heavier on desktop (600) for better visual weight at larger sizes — all without loading additional font files.

CSS Animation

Variable font axes are animatable with CSS transitions and keyframes: transition: font-variation-settings 0.3s ease enables smooth hover weight changes — impossible with static font families.

Variable Font Generator

Typeface Library & Font Specimen Previews

Inter

Open Sans

Bebas Neue

Playfair Display

Lato

Amatic SC

Press Start 2P

Roboto Mono

Orbitron

Roboto

Oswald

Indie Flower

Variable Fonts & CSS: The Complete Implementation Guide

CSS font-variation-settings

Responsive Weight Scaling

CSS Animation