Fontdue generates webfonts automatically from the font files you upload. Every family gets its own CSS URL you can drop into your website’s <head>, and the font files themselves are served from Fontdue’s global CDN.
For the structural detail of the stylesheet – what each @font-face block looks like, the vertical-metric overrides, and how variable axes and color tech map to CSS descriptors – see the Webfont CSS reference.
The Webfonts tab
Every font collection has a Webfonts tab in the admin with two sections:
- Embed: a pre-formatted
<link>tag pointing at a single CSS URL for the collection. Paste it into your site’s<head>and every style becomes available. - Selecting a style in CSS: a per-style block showing the CSS a page uses to render that style, as well as variable font instances.
Two selectors per style
When you want to show webfonts on your site, you have a choice between two systems called Shared family and Full name selectors, and you can switch views by clicking each tab.
- Shared family – more expected and ergonomic. Each family usually has one
font-familyand you use standard selectors likefont-weightandfont-styleto select the style. - Full name – bulletproof, but difficult to work with. Fontdue historically only supported this method to ensure styles can be selected within families of all shapes and sizes. Every style gets its own
font-family(e.g."Example Bold Italic").
Both forms are always in the stylesheet – switching views just changes the snippet on display. For the full structure of the @font-face blocks, see the Webfont CSS reference.
If you need more control, you can write your own @font-face CSS instead, using the GraphQL API to pull the webfont URLs directly.
Resolving shared-family warnings
The shared-family form expects each style in a family to have a unique combination of font-weight, font-style, and font-stretch. Most families fit that shape naturally – Regular and Bold, Upright and Italic – but layered, decorative, or non-conforming families don’t. Fontdue marks each colliding row in amber on the Shared family view, with an explanation like Not unique – also matches 4 other styles.
The warnings should be resolved if you intend to use the Shared family selectors yourself on your website. Type testers and other Fontdue components will render correctly despite the warnings.
To fix the warnings, click Edit family names and provide unique family names where necessary. Matching names group styles together; distinct names split them apart; a blank field falls back to the collection’s family name.
Suggested groupings
Fontdue will try to find appropriate family names if it detects a collision, and when appropriate will present an Apply suggested grouping button. Click the button to update the family names in one step, then save. You can change the suggested names by clicking Edit family names.
CSS family-name overrides only apply to the shared-family selectors, not the full-name selectors.
When a warning points at a font-file issue
Sometimes a collision is the symptom, not the cause – the style names look fine, but the font file’s metadata disagrees. Fontdue surfaces two such cases:
- Likely a missing italic flag. A style is named Italic (or Oblique, Kursiv, Italique…) but its font file reports an upright style. Fontdue reads the italic flag from the file’s
OS/2table – specifically thefsSelectionfield11In Glyphs, the flag is set by the Italic checkbox under Exports → Style Linking for each static instance, or by including the word Italic in a variable font’s name.. - Likely a missing weight class. Several styles named as different weights (e.g. Light and Bold) share the same
usWeightClassvalue inOS/2, so they collide onfont-weight22In Glyphs, this is the Weight class setting in Exports → General..
In these cases we recommend fixing the exports and reuploading the files – overriding the family names in Fontdue can paper over the issue, but the fonts will misbehave in other tools that expect these to be set correctly.
Conversion pipeline
Uploaded source files are converted to WOFF2 (and WOFF, for older browsers) through this pipeline:
| Input format | Pre-processing | WOFF | WOFF2 |
|---|---|---|---|
| WOFF2 | – | – | Served as-is |
| WOFF | – | Served as-is | – |
| TTF | anonymize | sfnt2woff |
woff2_compress |
| OTF | anonymize, otf2ttf, ttfautohint |
sfnt2woff |
woff2_compress |
The tools:
- anonymize – an in-house step that rewrites the font’s internal name table. More on this below.
otf2ttf– a FontTools utility that converts OTF to TTF (webfont formats are TTF-based).ttfautohint– applies automatic TTF hints, which sharpens rendering on Windows.sfnt2woff– compresses TTF to WOFF.woff2_compress– compresses TTF to WOFF2.
Anonymization
The anonymize step deters someone from installing your webfonts on their desktop. The font file remains a valid OpenType font, but the family and style names in its name table are replaced with Copyright <your foundry> and Not for desktop use. In a browser, this is invisible – the @font-face rule in the CSS gives the font its display name, and the browser never surfaces the internal names. In a font manager or installed apps list, though, the font shows up with those replacement strings.
Where it applies:
- Webfonts served to browsers – anonymized by default.
- Webfonts delivered in order archives – not anonymized by default, since buyers expect the real file. You can opt into anonymizing these too at Settings → Orders → Anonymize webfont names in order downloads.
- Uploaded WOFF/WOFF2 – never anonymized. They’re served as-is.
Domain access
Webfonts are served from Fontdue’s CDN at fonts.fontdue.com. Fontdue checks each incoming font request against a list of allowed domains for your site:
- Your
{subdomain}.fontdue.comis always allowed. - Your custom domain, if configured, is always allowed.
- Any additional domains listed in Settings → Integration → Cross-origin API access are allowed.
Requests from any other domain are redirected away33The same Cross-origin API access list also gates Fontdue’s GraphQL API, which is what the Store Modal and other components use. Any domain you list there is allowed for both API calls and webfont loading.. This means webfonts work wherever you embed them – the built-in site, a Webflow or Framer build, a custom front end – as long as the domain is listed.