How to ship a monochrome fallback for chromatic brand fonts
- Step 1Author the chromatic source — Brand font with COLR/CPAL or COLRv1 chromatic glyphs. Source of truth in design system repo.
- Step 2Generate monochrome fallback — Run the JAD Colour Table Remover to produce a monochrome variant. Output: brand-mono.woff2.
- Step 3Build a multi-format @font-face — src list: chromatic WOFF2 first (modern browsers stop here), monochrome WOFF2 second (older browsers fall back). Browsers pick the first format they fully support; chromatic-incapable engines walk past to the monochrome.
Frequently asked questions
How does the browser pick chromatic vs monochrome?+
Both files are technically WOFF2, so format() hints can't differentiate. Use unicode-range or font-feature-settings tricks, or simpler: for the chromatic font, declare it under a different font-family name and use CSS @supports to switch between them.
What about font-feature-settings: 'COLR'?+
There's no standard CSS feature setting for COLR opt-in. The browser-side logic is binary: either it renders COLR layers or it doesn't. Authoring two parallel @font-face blocks with different family names is the cleanest pattern.
Is this overkill for most brands?+
Yes for most. Plain monochrome brand fonts work everywhere with no fallback complexity. Chromatic brand fonts only earn their keep for premium/luxury brands where colour glyphs are a defining visual element.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.