Variable Font Previewer
Preview variable fonts with a continuous weight slider. See how weight changes the design and copy the CSS with correct font-variation-settings.
How to use
- Enter preview text.
- Choose a family (Inter and similar have variable variants).
- Drag the weight slider and copy the CSS output.
Frequently asked questions
What is a variable font?
A single font file containing multiple weights and styles, controlled by axes like wght (weight) and wdth (width). It replaces multiple static files with one optimised file.
When should I use font-variation-settings?
Only when you need to control axes that CSS does not expose directly. For weight, use font-weight — it is faster and better supported.
Are variable fonts smaller than static fonts?
Usually. One variable file often loads faster than 4+ static weight files combined, especially with WOFF2 compression.