COLRv1 Color Gradient Vector Fonts in Chromium 98

Shipping in Chromium 98 (currently in beta) is support for COLRv1 Color Gradient Vector Fonts. This is a pretty exciting addition, I must say!

COLRv1 enables powerful 2D graphics glyph definitions (gradients, transforms), supports variations, and reuses existing glyph contour definitions.

Previous color font formats embed bitmap files into the OpenType font containers. They do not scale with high quality and have a large binary size. OpenType SVG embeds vectors and scales better but requires complex parsers and rasterisers and does not interact with OpenType variations.

Instead of embedding bitmaps for emoji or entire SVGs, COLRv1 contains shapes vector glyphs that can be layered on top of each other. This allows shape reuse and results in smaller-sized fonts.

The Noto Color Emoji Font is already available as a COLRv1 variant, and is used in this demo that shows an emoji picker:

~

Do note that COLRv1 fonts support more than just emoji. It also supports that are purely vector based:

Here’s a reference rendering of that last demo:

~

COLRv1 Color Gradient Vector Fonts in Chromium 98 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.