COLRv1 fonts

[o-t-w]

Description

COLRv1 is a color font format that improves upon COLRv0 by adding support for gradients, among other features.

Unlike other color font formats, COLR fonts can utilise the CSS font-palette property.
Variable fonts have become popular on the web. Unlike other color font formats, COLR fonts can be variable fonts.

Specification

https://learn.microsoft.com/en-us/typography/opentype/spec/colr
https://github.com/googlefonts/colr-gradients-spec

Additional Signals

In 2021, Safari's position on COLRv1 was negative. Many of the concerns and reservations Apple raised have since been rectified. I am hopeful that they can reconsider and update their position.
COLRv1 is supported by Firefox and Chrome/Edge/Samsung Internet.

Of the two most popular font creation tools:

• Creation of COLRv1 fonts is supported in FontLab.
• Glyphs app has made it clear that COLRv1 is on their roadmap.

COLRv0 is supported by Sketch and Affinity Designer apps. Hopefully they will support v1 eventually. Figma supports neither OpenType-SVG or COLR.

We have started to see more COLRv1 fonts become publicly available (see here for a somewhat comprehensive list), including many variable COLRv1 fonts.

On Windows 11, COLRv1 was used to implement emoji.

While it is possible to support all browsers by using both a COLRv1 font for Chromium and Firefox and a SVG font for Safari, this requires the font foundry to release the font in both formats, and requires slightly more knowhow and effort for developers to implement. The variety of color font formats is somewhat difficult to navigate for both font creators and frontend developers.

[drott]

COLRv1 also interacts well with font-variation-settings.

We use a set of tests that we could upstream:
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/web_tests/virtual/text-antialias/colrv1.html
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/web_tests/virtual/text-antialias/colrv1-variable.html
https://github.com/googlefonts/color-fonts/tree/main/fonts
https://rtsh.es/test/var_colrv1.html

[othermaciej]

Is COLRv1 an open standard? The specification links are to a Microsoft documentation page and a Google explainer page. Are these Microsoft docs the canonical OpenType spec?

[gsnedders]

Is COLRv1 an open standard? The specification links are to a Microsoft documentation page and a Google explainer page. Are these Microsoft docs the canonical OpenType spec?

The canonical OpenType spec is just the MS docs; COLRv1 is also standardised for Open Font Format in ISO/IEC 14496-22:2019/Amd. 2:2023.