Log in Start free trial →
Reference
Fontdue.jsGraphQLDemo templateGuides
WebflowWordpress + Lay ThemeWordpress + SempliceNext.js (App Router)Next.js (Pages Router)Python + FlaskInformation
What’s newFull-service website developmentManaging your font catalogVariable fontsFont licensesWebfontsCross-origin accessPayments with StripeTaxTest fontsTest modeManage your Fontdue subscriptionLaunching your siteTroubleshootingUpdates
Update 001Update 002Update 003© Fontdue, 2022
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).