What font formats are supported?

You can upload variable fonts in TTF, OTF, WOFF, and WOFF2 formats up to 15 MB.

How does the tool format font-variation-settings?

It follows CSS Fonts Level 4 §8.2 by deduplicating repeated tags and sorting axis tags in ascending order by code unit.

Does it provide alternatives to font-variation-settings?

Yes, it generates standard high-level properties like font-weight, font-width, font-style, and font-optical-sizing when standard registered axes are present.

Are font files uploaded to a remote server?

No, all font parsing, axis inspection, and live previews execute client-side in your browser.

What happens if duplicate axis tags are supplied?

Per CSS specifications, repeated axis tags keep the last specified value and are clamped within the font's min/max bounds.

Elysia Tools

Navigation

Design

Variable Font Axis Instance and CSS Font Variation Settings Builder

Upload a variable font (TTF/OTF/WOFF/WOFF2) to inspect its fvar axes and named instances, preview interpolation live in the browser, and generate ready-to-paste font-variation-settings CSS plus the equivalent high-level properties and a variable @font-face block.

Details

What this tool helps you do

Reads the OpenType fvar table (axes with min/default/max plus named instances) via opentype.js, with WOFF2 unpacked through the wawoff2 WebAssembly port. The CSS builder follows CSS Fonts Level 4 §8.2: axis tags are matched case-sensitively, repeated tags keep the last value, and the emitted font-variation-settings list is de-duplicated and sorted in ascending order by code unit like the spec computed value. Where high-level replacements exist (wght→font-weight, wdth→font-width, slnt/ital→font-style with the slnt angle negated, opsz→font-optical-sizing), they are emitted as the recommended alternative. The preview embeds the uploaded font as a data-URI @font-face, renders each axis extreme, every named instance, your custom coordinates, and an interactive slider playground that prints the CSS live.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Samples

Variable Font Axis Instance and CSS Font Variation Settings Builder

What this tool helps you do

Run this tool

Examples that match this tool

Continue with connected tools and hubs

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Configuring Custom Weight and Width for Cabin Variable Font

2. Auditing Complex Parametric Axes in Amstelvar

FAQ

Variable Font Samples

Bulma CSS Framework Samples

CSS Selector Samples

Invalid Variable Names Code Samples

PDF Strikethrough Review Extractor

Audio Read-Along Cue Generator

Font File Inspector

Image Palette to Design Tokens