Variable Font Previewer
Test a variable font before you license it or ship it. Drop the file in and every axis it has, standard or custom, turns into a slider. Add more preview areas to compare sizes, colours and text side by side.
Drop a variable font here, or click to pick one
Font: not loaded
Ready
Sample
This tool is free, with no account and no ads. If it saved you time, you can support it.
DonateHow to use
- Drop a variable font file (.ttf, .otf or .woff) on the box, or click it to pick a file.
- Move the axis sliders, click a named style, or press Play to sweep an axis from end to end. Every preview area updates at once.
- Click into a preview and type your own text. Set its size, text colour and background.
- Switch the sample to a headline, paragraph, alphabet, Greek or accents, add more preview areas to compare, then copy the CSS for your current settings.
Questions
- Which axes does it show?
- All of them: the registered axes like wght, wdth, slnt, ital and opsz, and any custom axes the designer added, with their real minimum, maximum and default values.
- Does the font get uploaded?
- No. It is parsed in your browser with opentype.js and never leaves your computer.
- Does it read WOFF2?
- Not yet. Use the .ttf, .otf or .woff version of the font, which most foundries include.
- Can I use a static font?
- It will load, but there will be no sliders because a static font has no axes.