COLRv1
COLRv1 is a font format that supports multi-color glyphs. COLRv1 extends COLRv0 to support gradients, transforms, and blending modes. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
OpenType COLRv1 | 98 | 98 | 107 | | 98 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
@font-face {
font-family: 'RichIcons';
src: url('icons-colrv1.woff2') format('woff2');
}
.emoji {
font-family: 'RichIcons';
}Live demo
Use cases
-
Refine text rhythm
Use COLRv1 to make long-form reading or dense interface copy easier to scan and understand.
-
Support language nuances
Apply COLRv1 when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test COLRv1 in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.