Variable Font Tester
Explore and test variable font axes in real-time
Drop variable fonts
or click to browse
Supports variable font formats (WOFF2, WOFF, TTF, OTF)
About Variable Fonts
Variable fonts contain multiple variations within a single file. Adjust the axes below to explore different styles like weight, width, slant, and more.
No Variable Font Loaded
Upload a variable font to explore its axes and create custom styles
Developer & Verifier
Developed by
Marcus Rodriguez
Lead Developer
Verified by
Sarah Mitchell
Product Designer, Font Specialist
What is Variable Font Testing?
Variable font testing explores the variation axes embedded in a single OpenType font file, using interactive sliders to adjust weight, width, slant, italic, and optical size values while generating the corresponding font-variation-settings CSS. Approximately 40% of websites use at least one variable font (HTTP Archive 2025), up from near-zero adoption 5 years ago.
A single variable font file replaces multiple static files: families needing 4 or more weights save total bytes with one variable file versus separate Regular, Bold, SemiBold, and Black files. Google Fonts now serves variable versions by default for supported families, with 525 of its 1,900+ families available as variable fonts.
The font-variation-settings CSS property controls registered axes (wght, wdth, ital, slnt, opsz) and custom axes unique to each typeface. Variable font performance depends on how many axes and masters the font contains — more axes increase file size, so a font with weight + width + slant axes produces a larger file than one with weight only.
OpenType features like stylistic alternates and ligatures work independently of variation axes. Use the font analyzer to inspect which axes and features a variable font supports before testing.
Upload a variable font file in WOFF2, WOFF, TTF, or OTF format and use interactive sliders to adjust 5 registered axes: weight (100–900), width (50–150%), slant (-15° to 0°), optical size (8–144pt), and italic (0–1). The preview updates in real time at any size from 12–120px, with 6 preset sample texts for testing different character sets. The generated font-variation-settings CSS updates live as you move each slider.
How to Use This Tester
Upload Variable Font
Drag and drop or click to upload a variable font file in WOFF2, WOFF, TTF, or OTF format.
Explore Axes
Interactive sliders appear for each available variation axis in the font (weight, width, slant, etc.).
Adjust Values
Drag sliders to test different axis values and see live preview changes in real-time.
Copy CSS
Copy the generated font-variation-settings CSS code to use your custom configuration in web projects.
Features
Registered Variable Font Axes
| Axis Tag | Axis Name | Range | Default | CSS Property |
|---|---|---|---|---|
| wght | Weight | 100-900 | 400 | font-weight |
| wdth | Width | 25%-200% | 100% | font-stretch |
| ital | Italic | 0-1 | 0 | font-style |
| slnt | Slant | -90 to 90 | 0 | font-style: oblique |
| opsz | Optical Size | 6-144 | 14 | font-optical-sizing |
Frequently Asked Questions
What is a variable font?
What are registered axes?
How do I use font-variation-settings in CSS?
What is the performance benefit of variable fonts?
What is browser support for variable fonts?
How do I detect if a font is variable?
Related Tools & Guides
Font Weight Calculator
Calculate CSS font-weight values across the 100-900 scale
Font Preview Generator
Preview fonts at multiple sizes and weights
Font Analyzer
Inspect variation axes, glyph count, and OpenType features
Variable Fonts Guide
Complete guide to variable font implementation
Variable Fonts Performance
When variable fonts outperform multiple static files
@font-face CSS Generator
Generate @font-face CSS with font-variation-settings