font-variation-settings Generator
Tune every variable-font axis with sliders and get the CSS string. Works with any OpenType variable font.
Runs entirely in your browser — no upload, no registration.
CSS
font-variation-settings: "wght" 400, "wdth" 100, "slnt" 0, "opsz" 14;What this tool does
Emits the low-level font-variation-settings property. When a variable font exposes an axis, this string is how you set it precisely.
Why you might need it
Some axes aren't mapped to CSS keywords — grade, optical size, custom axes — and font-variation-settings is the only way to reach them.
How to use it
- Adjust the sliders for the axes your font supports.
- Copy the CSS.
- Prefer high-level properties (font-weight, font-stretch) when possible for readability.
Always review the included licence before commercial use. Do not remove copyright records, designer names, licensing metadata or embedding restrictions from any font you process.