COLRv1 fonts

[o-t-w]

WebKittens

No response

Title of the proposal

COLRv1

URL to the spec

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

URL to the spec's repository

https://github.com/googlefonts/colr-gradients-spec

Issue Tracker URL

No response

Explainer URL

No response

TAG Design Review URL

No response

Mozilla standards-positions issue URL

mozilla/standards-positions#497

WebKit Bugzilla URL

No response

Radar URL

No response

Description

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

Unlike other color font formats, COLR fonts can utilise the CSS font-palette property. COLRv1 also interacts well with the CSS font-variation-settings property.

Variable fonts have become popular on the web. Unlike other color font formats like OpenType-SVG, COLR fonts can be variable fonts.

In 2021, Safari's position on COLRv1 was negative. Many of the legitimate concerns and reservations Apple raised have since been rectified.

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 COLRv1 on their roadmap.

From a typeface creation POV, I have created a variable COLRv1 font in FontLab and found it a fairly trivial process.

When it comes to design tools, COLRv0 is supported by the Affinity suite of apps and by Sketch app. Hopefully they will support v1 in the future. Figma supports neither OpenType-SVG or COLR.

We have started to see more COLRv1 fonts become publicly available, including many variable color fonts, which aren't possible with OpenType-SVG. See here for a somewhat comprehensive list. I currently count 20 well-designed and well-engineered publicly available COLRv1 fonts, most of them open source. This is good going for a font format that has only existed for a couple of years. While some of this is down to the patronage of Google Fonts, among professional type designers, excitement for this format is high.

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. Chromium have made it clear that they will not ever support OpenType-SVG.

One of the initial concerns expressed was "Supporting both OT-SVG and this new proposal is twice (-ish) the maintenance burden". Firefox have suggested they may eventually drop support for OpenType-SVG to avoid this issue:

I suspect that in the longer term, COLRv1 may (should?) eclipse OT-SVG as the preferred format for "rich" color fonts. Given the low level of OT-SVG usage on the web, we may want to consider dropping support for it altogether once COLRv1 is widely supported, and conversion tools are available. So long-term, we wouldn't be maintaining support for two color font technologies with largely-equivalent capabilities; we'd be replacing the rather Heath Robinson-ish (or Rube Goldberg-ish, for those across the Atlantic) OT-SVG technology mashup with the more integrated COLRv1 approach.

Peter Constable's reply to WebKit's position in 2021 is here.

COLRv1 has 12 votes for Interop 2025.

Having exported color fonts myself from FontLab, COLRv1 has consistently delivered a significantly smaller file size compared to the same font exported as an OpenType-SVG. Smaller file sizes was the primary rationale for the creation of COLRv1. OpenType-SVG files were deemed by Google to be too large for use on the web. The OT-SVG version of Noto emoji was more than twice as large as the COLRv1 version.

[othermaciej]

Is COLRv1 a standard? The links provided are to a Microsoft documentation page and a Google explainer repository.

[o-t-w]

According to the 2024 edition of the Web Almanac, COLRv1 is already used on more websites than OpenType-SVG.