Variable Font Axis Exporter
Export settings
Axis reference
| Tag | Name | Range | Default | Driven by | Notes |
|---|---|---|---|---|---|
| wght | Weight | 300 – 700 | 400 | font-weight | prefer the registered property so the value cascades and animates |
| opsz | Optical size | 9 – 144 | 14 | font-optical-sizing | prefer the registered property so the value cascades and animates |
Preview
One file, every weight
The preview drives the catalogue family's own axes; the exported CSS describes any variable font, so replace the family name and URL with the real asset.
@font-face {
font-family: "Racira Variable";
src: url("/fonts/racira-variable.woff2") format("woff2-variations");
font-weight: 300 700;
font-variation-settings: "opsz" 14;
font-display: swap;
}:root {
--axis-wght: 400; /* Weight: 300 – 700 */
--axis-opsz: 14; /* Optical size: 9 – 144 */
}
/* Registered properties participate in inheritance and cascade */
.variable-weight { font-weight: var(--axis-wght); }
.variable-optical { font-optical-sizing: auto; }Gotchas worth knowing
- · A variable font is one file but the browser still instantiates a face per weight it renders; keep the number of weights used in one view modest.
- · font-variation-settings overrides everything for that axis, including inheritance — use it last, not first.
- · Animating font-weight is smooth; animating font-variation-settings is not interpolated the same way in every engine.
- · Subsetting a variable font keeps the axes you keep — dropping an axis from a subset is possible but irreversible without the original.
You Might Also Need
The variable font axis exporter writes the complete CSS contract for a variable face: the @font-face with its weight range, the axes as custom properties, and the rendering rules that use a registered property wherever one exists.
What is Variable Font Axis Exporter?
The variable font axis exporter produces the three pieces of CSS a variable font needs: a @font-face whose descriptors describe the axes, a set of axis tokens as custom properties, and the rules that apply them. You choose a reference family, name the CSS family, give the font URL, set the weight range descriptor — and optionally a width range — then export. The axis table is the part worth reading before copying: it states which axes can be driven by a standard property and which can only be reached through font-variation-settings.
- Reference families with declared axes: Fraunces (wght 300-700, opsz 9-144), Source Serif 4 (wght 300-700, opsz 8-60), Inter (wght 300-700) and DM Sans (wght 300-700, opsz 9-40), each with its default.
- Registered-property axis catalogue: wght through font-weight, wdth through font-stretch, opsz through font-optical-sizing, ital through font-style: italic, and slnt through font-style with an oblique angle.
- Custom-only axes in the catalogue: GRAD -200 to 150, SOFT 0 to 100 and WONK 0 to 1, none of which have a standard property.
- Outputs: the variable @font-face with format("woff2-variations"), an axis token block, and a custom-axis rule when any exported axis lacks a registered property.
- Sample text and size, up to 120px, previewed with the reference family's own axes.
The distinction the tool is built around is cascade. An axis with a registered property — weight, width, optical size, italic, slant — is reachable through ordinary CSS, so it inherits, animates and responds to media queries like any other declaration. An axis without one can only be set through font-variation-settings, which overrides everything for that axis, including inheritance, and is not interpolated the same way by every engine. That is why the exported token block names each axis as a custom property with its range in a comment and then applies the registered ones through their real properties, leaving font-variation-settings for exactly the axes that have no alternative. The @font-face describes the weight range you supplied, which is what allows a browser to instance any weight in that range from a single file.
- The axis list is declared, not read. It comes from the built-in table for the four reference families, so the export describes any variable font only after you replace the family name, URL and ranges by hand.
- The weight and width descriptors are free text. Nothing validates them against the file's real fvar table.
- The slant descriptor is written as a fixed oblique angle range when that axis is present, rather than following the axis values.
- It exports CSS only — no font file is produced, opened or modified.
- The preview drives the catalogue family's real axes, so what you see is that family, not the font you are describing.
The natural use is a design system that ships one variable file and wants predictable, cascading control over it: export the contract, replace the placeholders with the real asset details, and keep the tokens in one place so weight and optical size are changed by name rather than by magic numbers. For exploratory work on the same file, the variable font sliders are the faster way to feel the axes, and the CSS variable font builder is the page for assembling the surrounding typographic system. Whichever route the CSS takes, the character extractor's range list is what keeps the delivered file small.
How to use Variable Font Axis Exporter
- Pick the reference family whose axes match the font you are describing.
- Set the CSS family name, the font URL and the weight range descriptor, and add a width range if the file has one.
- Type sample text and set a size to see the axes move using the reference family.
- Copy the @font-face, then the axis tokens and custom-axis rule, and replace the placeholder family and URL with the real asset.
When to use Variable Font Axis Exporter vs related tools
Choose it when one variable file has to be driven by name across a whole interface and the exported contract is going into a design system. If the goal is to explore what the axes do before committing to CSS, the variable font sliders are quicker, and the CSS variable font builder places the same file in a wider typographic system. Every axis the contract exposes should be explainable to whoever maintains it, which is what the tokens and the registered-property notes are for. Where several faces have to be declared side by side, the font CSS generator handles the family-wide case, and the font loading strategy builder decides when the variable file is fetched.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.