Variable fonts

Fontdue treats a variable font like any other family. The only difference is that Fontdue recognizes it as a variable font by its variable axes and named instances. Those power a few variable-specific affordances in the admin, the type tester, the Store Modal, and the served webfont CSS, described below.

Detection on upload

When you upload a variable font file, Fontdue reads the fvar table and stores the axes and named instances as metadata on the family and its stylesFont styleA distinct member of a family – the font files under it that share one style name¹ (e.g. Regular, Bold, Italic), one file per format. Usually weights and slants, but a family can divide however its design calls for. The unit customers buy; often shortened to style, and priced as its own SKU.¹The typographic subfamily name (Name ID 17), the field Fontdue reads to group files into a style. . You don’t configure this, it all comes from the font file itself¹¹If axes or instances are missing or wrong, fix them in your font editor and re-upload. There’s no way to edit them in Fontdue..

Variable font families are marked with a VAR tag in the admin – on the collection list, on the family header, and on individual styles that contain a variable axis.

Variable font styles

A variable font family can be made up of one or more files, and each file becomes a style – the same concept as styles in a traditional family (see Font catalog), just with a variable file behind each one. The common case is a single file that covers the whole design space through its axes, giving the family one style. But some designs can’t be fully expressed through axes alone. Italics are the usual example: if you can’t reduce upright and italic to a single axis, you end up shipping two variable files, and the family has two styles (e.g. Upright and Italic).

Either case works – a variable font family with one style or with several behaves the same way in the admin and the Store Modal. The distinction matters for pricing and for the names customers see, covered below.

Named instances

Named instances aren’t optional – Fontdue’s type testers and Store Modal both rely on them. A variable font without any named instances will render incorrectly in type testers. Make sure your font file declares at least one named instance per style before uploading.

Wherever Fontdue would normally show a list of styles for a family, a variable font shows its named instances instead. That applies in the type tester’s style selector and – for Store Modal purchases – in the row of style buttons on the family page.

Exposing axes in type testers

A variable font’s axes can be exposed as sliders in your site’s type testers, so visitors pick a named instance from the style selector and then nudge weight, width, optical size, or any custom axis from there. You choose which axes to expose on the collection’s Type testers tab – see Type tester editor for the control and how it relates to OpenType features.

Naming

If you’re selling both a static family and its variable counterpart, give them distinct family names. The common convention is to suffix the variable one with Variable (e.g. Example Sans and Example Sans Variable). This is necessary for Fontdue to correctly group them into a superfamily structure, and it’s better for users of the fonts as well.

Pricing variable fonts

Where you put the price depends on how many styles the variable font has:

• Single style (one file covering the whole design space) – price the family, not the style. A variable font with one style doesn’t benefit from a visible style name, and pricing only the family keeps the name out of the UI.
• Multiple styles (e.g. an upright and an italic variable file) – price each style if you want them purchasable individually, and give them clear labels like Upright and Italic since customers will see the names. Pricing individual styles is optional – you can price only the family if you’d rather sell the variable font as a single unit.

See Pricing for how prices combine through the rest of the catalog, and Font licenses for making sure your licenses include TTF – variable fonts only ship in that format.

Pairing with a static family

A common setup is offering a static family alongside its variable counterpart. Two ways to structure this:

One static + one variable – group them into a superfamily by dragging both sets of files together when creating the collection. Purchasing the superfamily gives customers both families at once. See Font catalog for how superfamilies work.

Multiple widths or optical sizes, each with a matching variable – wrap everything in a superfamily, then use collection bundles to group each width with its variable. This way customers can buy a single width’s static + variable pair without committing to the whole superfamily.

Adding a variable font to an existing family

If you’ve already sold a static family and want to add its variable counterpart, you can promote the family to a superfamily and attach the variable as a sibling.

1. On the family, go to the Actions tab and click Turn into superfamily.
2. Upload the variable font as a new collection, using the Add to existing collection option to point at the superfamily.

Existing customer orders automatically extend to the full superfamily, so past customers gain access to the variable font on their next download. To push updated ZIPs with the variable files to existing orders, go to Orders, filter by the superfamily and a date range that covers all past orders, and click Rebuild ZIP files²²This rebuilds the archives but doesn’t email anyone. If you want to notify past customers, export the filtered orders as a CSV to pull the email list..

Webfont CSS

When you export your variable font with the registered axes – wght, wdth, slnt, ital, opsz – the CSS Fontdue serves to a foundry’s site maps them to standard CSS properties³³Fontdue’s own components – type testers, the Store Modal, the character viewer – use font-variation-settings properties to select instances directly when rendering, so the conventions below don’t affect them.. A page sets font-weight: 700 or font-stretch: 75% and the browser picks the right instance. Custom axes are selected with font-variation-settings. See the Webfont CSS reference for the full mapping.

We recommend following these conventions for variable font exports:

• ital – Define instances at ital=0 or ital=1 only. Fontdue treats those as the upright and italic variants and emits a paired @font-face block so font-style: italic reaches the real italic glyphs in every browser.
• opsz – Pin every named instance to the same opsz value⁴⁴The same convention is what Core Text on macOS expects: optical sizing is enabled by default only when no named instance pins opsz to a non-default value. Myles Maxfield on WebKit bug 247987 describes the behavior.. With instances aligned that way, browsers’ default font-optical-sizing: auto drives the axis from the rendered font-size, and the per-instance CSS in the Webfonts tab omits opsz accordingly⁵⁵A page can still pin opsz by hand with font-variation-settings to override the automatic behavior..