How to why your variable font shows names — or numbers — and what that means
- Step 1Upload the font in question — Drop the TTF, OTF, WOFF, or WOFF2. The viewer parses `fvar` directly from the sfnt buffer.
- Step 2Look at the row labels — Named labels (Thin, Regular, Bold) mean the font defines named instances. Labels like `wght 400` mean it has a wght axis but no instances. A single `Static` row means no wght axis at all.
- Step 3Read the settings string per row — For named instances each label includes the full coordinate string, e.g. `Bold · "wght" 700, "opsz" 14`. That tells you which other axes the designer fixed for that instance.
- Step 4Compare two fonts with the same range — Run the viewer on each. If one shows names and the other shows numbers, you've confirmed the structural difference even though both support the same weights.
- Step 5Decide how you'll reference weights — If instances exist, you can reference them by name (`font-named-instance`) and copy their settings; if not, you'll always address weights numerically via `font-variation-settings`.
- Step 6Keep the HTML as documentation — Save the self-contained output as a record of the font's instance structure for your design-system docs.
Named instances vs numeric steps — what the viewer renders
The same wght range produces different rows depending on whether fvar defines instances. This is the core distinction the viewer exposes.
| fvar contents | Row source | Row count | Label example | CSS to copy |
|---|---|---|---|---|
| wght axis + named instances | Each named instance | = number of instances | Bold · "wght" 700 | font-variation-settings: "wght" 700 |
| wght axis, no instances | 100-unit axis steps | floor((max - start)/100) + 1 | wght 700 | font-variation-settings: "wght" 700 |
| No wght axis (other axes only) | Fallback | 1 | Static | font-weight: 400 |
| No fvar (static) | Fallback | 1 | Static | font-weight: 400 |
What named instances give you that a bare axis doesn't
Both render on the web identically, but tooling and OS behaviour differ. The viewer is how you tell which one you have.
| Capability | Named instances | Bare wght axis |
|---|---|---|
| Appears as separate entries in OS font menu | Yes | Often just one entry |
Selectable by font-named-instance | Yes, by name | No named target |
| Carries pinned values for other axes | Yes (full coordinate set) | No — only wght is addressed |
| Rendered as numbered rows in this viewer | No (named rows) | Yes (wght N) |
| Designer-curated sweet spots | Yes | You choose freely along the range |
Cookbook
Five comparisons that make the named-vs-numeric distinction concrete. Each shows what the viewer renders and what it tells you about the font's structure.
Same range, different rows
ExampleTwo fonts both declare wght 100–900. One has instances, the other doesn't — and the viewer renders them completely differently.
Font A (instances) renders 6 rows: Thin, Light, Regular, Medium, Bold, Black Font B (no instances) renders 9 rows: wght 100, wght 200, … wght 900 Same web behaviour; different fvar structure.
An instance that pins a second axis
ExampleThe settings string reveals the designer fixed optical size for the Bold instance — invisible until you read the label.
Row label: Bold · "wght" 700, "opsz" 14 Meaning: selecting this named instance also sets opsz 14. If you only set "wght" 700 yourself, opsz stays at its default — not necessarily 14.
Instances out of weight order
Examplefvar order isn't guaranteed ascending; the viewer renders them as stored, so trust the label over the position.
Rendered order (as in fvar): Regular · "wght" 400 Bold · "wght" 700 Light · "wght" 300 Light appears third — read the settings, not the row index.
Fractional instance weight
ExampleSome fonts define instances at non-round weights; the label number is rounded, the applied settings are exact.
Stored coordinate: "wght" 637.5 Label shows: 638 (Math.round) Applied: font-variation-settings: "wght" 637.5 (rendered glyphs use the exact value)
A wght-less font that still has axes
ExampleAn optical-size-only font has axes but no wght, so the viewer can't step it and falls back to one Static row.
fvar axes: opsz (8–144) No wght axis. Viewer output: 1 row -> Static (font-weight: 400) To explore opsz, this viewer is the wrong tool — it only steps wght.
Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
Font defines instances but no wght axis
Single Static rowThe instance branch only runs when a wght axis is found. If a font has, say, only an opsz axis plus instances, the viewer takes the no-wght fallback and renders one Static row at 400 — the instances are not enumerated.
wght axis with zero named instances
Numeric stepsWhen fvar.instances.length is 0 the viewer steps the wght axis in 100-unit increments instead of showing names. This is the expected behaviour for many continuous fonts, not an error.
Instance name missing from name table
Falls back to 'Instance N'If an instance's subfamily name ID has no matching Windows-English name record, the parser labels it Instance 1, Instance 2, etc. You'll still get the row and its settings string.
Axis label missing from name table
Falls back to axis tagIf an axis's name record is absent, the viewer uses the raw 4-char tag (e.g. wght) as the name. The stepping logic still works because it keys off the tag, not the label.
Only Windows-English names are read
Non-English-only names droppedThe fvar name lookup only reads platform 3 / encoding 1 / language 0x409 records. A font naming instances solely in another platform/language will fall back to Instance N labels.
Instance pins wght to a fractional value
Label rounded, render exactDisplayed weight is Math.round(coord) but the applied font-variation-settings uses the exact stored value, so glyphs match the instance precisely even when the number looks off by half a unit.
Continuous axis min/max not on 100s
Edges rounded/clippedNumeric steps start at ceil(min/100)*100 and stop at the last multiple of 100 <= max, so a 50–950 axis renders wght 100 … wght 900 and clips both genuine ends.
Both width and weight instances present
All renderedEvery instance in fvar is rendered, including width-variant instances, each with its full coordinate string — so a Condensed Bold appears as its own row distinct from Bold.
Frequently asked questions
What's the difference between a named instance and the wght axis?
A named instance is a designer-curated point with a name and a full set of axis coordinates; the wght axis is the continuous range the font supports. fvar can hold both. The viewer shows instances when they exist, otherwise numeric axis steps.
Why does my font show numbers instead of Thin/Bold names?
It has a wght axis but defines no named instances in fvar. The viewer falls back to stepping the axis in 100-unit increments and labels each row wght N.
Why does a font with names render in a weird order?
Instances are rendered in the order they appear in fvar, which isn't guaranteed to ascend by weight. Read each row's settings string rather than relying on position.
What does the settings string after the name mean?
It's the instance's complete coordinate set — every axis it pins, not just weight. Copy it verbatim to reproduce that instance exactly in CSS.
My instance shows a rounded weight — is the render off?
No. The label number is Math.rounded, but the applied font-variation-settings uses the exact stored coordinate, so the glyphs are correct.
Why are some instances labelled 'Instance 2' instead of a name?
The fvar parser only reads Windows-English (platform 3 / encoding 1 / lang 0x409) name records. If the instance's name isn't in one, it falls back to Instance N.
Does a font with named instances behave differently on the web?
Visually no — both render the same via font-variation-settings. The difference is in tooling: named instances appear in font menus and are selectable by font-named-instance.
Can the viewer show me named instances of a width or optical-size axis?
Only if the font also has a wght axis — the instance branch requires one. A font with axes but no wght falls back to a single Static row.
How many numeric steps will a continuous font show?
From ceil(min/100)*100 up to the largest multiple of 100 that is <= max, in +100 increments. A 100–900 axis shows nine rows.
Does it read fvar itself or rely on a library?
It parses the fvar and name tables directly from the sfnt buffer, which keeps the row labels stable and lets it correlate name records for axis and instance labels.
Can two rows have the same weight?
Yes — if two named instances share a wght (e.g. Bold and Condensed Bold) both appear, differentiated by their other axis coordinates in the settings string.
How do I inspect the rest of the font's structure?
For axes beyond weight and for instancing a static file, use the variable font freezer; for OpenType features see the opentype features inspector; to read the family and instance names from the name table, use the font metadata extractor.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.