drott
commented
4 days ago 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
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-paletteproperty. 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:
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 Google Fonts for some examples).
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.