Color fonts

Color fonts live in your Fontdue catalog the same way normal fonts do: under families and 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. , same pricing and licensing. What’s specific to them is their color tech – the competing file specifications for encoding colour glyphs, no single one of which renders on every platform. Fontdue supports the common techs – COLRv0, COLRv1, OpenType-SVG, and the bitmap formats sbix and CBDT – and you can upload the same face in several at once.

Uploading

Upload each tech variant as a separate file and keep the family and style names the same across them – by convention, the family name is suffixed with Color or Colour the same way variable families are suffixed with Variable. Fontdue groups files that share a name into one Font style, so a COLRv0 file and an SVG file uploaded under Example Color Regular end up as two files on a single style. You may also upload several formats (OTF, TTF, WOFF2) for each tech.

Which techs to offer depends on your audience. COLRv0 alone is usually enough for broad cross-browser and platform compatibility. If you’re exporting COLRv1, also upload a COLRv0 variant so Safari has something to render.¹¹Safari doesn’t render COLRv1 – WebKit took a negative position on it in 2021. If you want OpenType-SVG to reach Safari and Adobe apps, upload an SVG variant alongside your COLR file.²²OpenType-SVG renders in Firefox and Safari but not in Chrome. If you can only offer one tech, COLRv0 reaches the most users.

It’s possible to export a bundled file that carries two or more color techs in one file. Fontdue accepts bundled files, but we recommend keeping each tech in its own file: bundled files are larger, and exporting techs separately is well supported on the web through the CSS tech() syntax.

On the web

The family’s webfont CSS declares one @font-face src entry per (file, tech) with CSS tech() hints, and the browser picks the first entry it can render:

@font-face {
  font-family: "Example Color Regular";
  src:
    url('colrv1.woff2') format('woff2') tech(color-COLRv1),
    url('colrv0.woff2') format('woff2') tech(color-COLRv0),
    url('svg.woff2')    format('woff2') tech(color-SVG);
}

Fontdue writes these in order of preference: COLRv1 → COLRv0 → SVG → sbix → CBDT.

In customer downloads

Order archives include every color-tech variant uploaded on a style, with each file named so its tech is identifiable. Buyers pick the file that matches their target – the SVG variant for Illustrator and InDesign, the COLRv0 file for the broadest browser support.

If you’re offering more than one tech, it’s worth mentioning the CSS tech() syntax in your customer-facing usage notes so buyers know how to wire up the multiple files when setting up webfonts on their own site.