Widely availableSupported across all major browsers. Safe to use in production.

Overview

COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.font-face.OpenType_COLRv0
53
79
31
11.1
53
11.3
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: 'ColorIcons';
  src: url('icons-colrv0.woff2') format('woff2');
}
.icon {
  font-family: 'ColorIcons';
}

Live demo

col-fontconcept

CSS col-fontconcept demo.

PreviewFullscreen

Layer structure

CSS reiya-structure demo.

PreviewFullscreen

emoji. Example

CSS emoji. Example demo.

PreviewFullscreen

Use cases

  • Using COLRv0

    COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Powered by web-features