Documentation
  • Fontdue
๐Ÿ““

Variable fonts

Reference

๐Ÿ““Fontdue.js๐Ÿ““GraphQL๐Ÿ““Demo template

Guides

๐Ÿ““Webflow๐Ÿ““Framer๐Ÿ““Wordpress + Lay Theme๐Ÿ““Wordpress + Semplice๐Ÿ““Next.js (App Router)๐Ÿ““Next.js (Pages Router)

Information

๐Ÿ““Full-service website development๐Ÿ““Managing your font catalog๐Ÿ““Variable fonts๐Ÿ““Font licenses๐Ÿ““Order variables๐Ÿ““Webfonts๐Ÿ““Cross-origin access๐Ÿ““Payments with Stripe๐Ÿ““Tax๐Ÿ““Test fonts๐Ÿ““Test mode๐Ÿ““Manage your Fontdue subscription๐Ÿ““Launching your site๐Ÿ““Troubleshooting๐Ÿ““Customize the Address fields๐Ÿ““reCAPTCHA

Updates

๐Ÿ““Whatโ€™s new๐Ÿ““Update 001๐Ÿ““Update 002๐Ÿ““Update 003๐Ÿ““Update 004๐Ÿ““Update 005
โšก
Start free trial โ†’

Variable fonts

Fontdue automatically detects if your font is a variable font, and is generally treated the same as a traditional Family, with a few notable differences:

  • The variable font Family is marked in the admin with the VAR tag
  • When creating type testers for variable fonts, you may choose to expose Variable Axes to users. These are revealed in the OT Features panel
  • Type testers allow you to select named instances from the variable font. These are also automatically exposed to users in the โ€œstyle selectorโ€ in place of a list of traditional styles
  • The end-user shopping experience annotates variable fonts with โ€œVariable fontโ€ where relevant, and shows the range of named instances

Naming

You should give your variable font a distinct family name from the โ€œtraditionalโ€ styles if youโ€™re offering both (usually suffixed withย โ€œVariableโ€).

Including variable fonts with traditional font families

Itโ€™s possible to structure your collection in a way that variable fonts are bundled with a full family purchase. You do this by grouping your variable font and traditional font family into a โ€œsuperfamilyโ€ by dragging all the files together when creating a collection. Make sure the variable font and traditional font styles have distinct family names.

Variable fonts styles

Variable fonts may have one or more files that make up the design space. These individual variable font files become Styles.

It is common to only have one Style for a variable font. In this case, we recommend only setting a price for the Family (Font collection). That way the name of the Style is not shown to the end user as it is not relevant.

You may opt to make each variable style purchasable as you would with traditional styles. In this case, the names of the variable Styles are shown during the shopping experience, so we recommend taking care to name these styles (for example, you may have โ€œUprightโ€ and โ€œItalicโ€).

Named instances

It is important to include named instances in your variable fonts. We expect these to exist for the type tester to work correctly.

Adding Variable Fonts to existing families

If youโ€™ve already uploaded a regular font family, and you want to make the variable font available to customers as well, you can turn the existing family into a Superfamily and then attach the variable font as a new subfamily. Go to the Actions tab of the family and click Turn into superfamily, then upload the variable font as a new collection with the Add to existing collection option pointing to the superfamily.

This action will make any existing customer orders for the family now point to the entire superfamily. If you want to update existing customer ordersโ€™ ZIP files to include the new variable fonts, you can navigate to Orders, filter on the superfamily and a date range that includes all orders, and then click Rebuild ZIP files to rebuild them all. (This will not notify them via email automatically, but you can export the filtered list as a CSV to extract the list of emails).

  • Variable fonts
  • Naming
  • Including variable fonts with traditional font families
  • Variable fonts styles
  • Named instances
  • Adding Variable Fonts to existing families