How to colour font formats: colr, sbix, svg-in-ot compared
- Step 1COLR/CPAL (Microsoft) — Compact vector colour layers. COLRv0 (flat regions) is universally supported; COLRv1 (gradients, transformations) shipped in Chrome 98+ and Firefox 109+ but not yet Safari. Smallest format on disk.
- Step 2sbix (Apple) — Embedded bitmap PNGs per glyph at multiple resolutions. Used by Apple Color Emoji. Supported by Safari and CoreText; ignored by Chrome and Firefox. Largest format on disk (multi-MB for full emoji coverage).
- Step 3CBDT/CBLC (Google) — Embedded bitmap PNGs (similar to sbix but Google's variant). Used by Noto Color Emoji. Supported by Chrome and Firefox; ignored by Safari (mostly).
- Step 4SVG-in-OpenType — Embedded SVG documents per glyph. Most flexible but largest. Supported by Firefox and Edge; partial Safari support. Uncommon in production.
Frequently asked questions
Why so many formats?+
Each vendor solved the same problem (colour glyphs) at different times: Apple shipped sbix first (2013), Google CBDT/CBLC (2014), Microsoft COLR/CPAL (2015), then OpenType-SVG (2016). Each kept their format for compatibility; none won.
Which should I use for branded fonts?+
COLRv1 for vector colour with widest modern support. SVG-in-OT for complex effects (gradients, opacity) with smaller browser support. Avoid sbix and CBDT — bitmap formats balloon file sizes.
Do I need all four when authoring?+
For maximum coverage, ship COLRv1 + SVG-in-OT (Microsoft + Mozilla preference) plus sbix or CBDT for older mobile. Most fonts ship just COLR for compactness.
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.