Color font

Ordinary type is a silhouette. The font supplies an outline and the page supplies one ink through color, which is why a heading can be any color you like and never two colors at once. A color font breaks that arrangement by putting the color inside the file. Its glyphs are built from stacked layers, each layer an outline of its own with a paint attached: a shadow, a fill, a highlight, sometimes a gradient across the lot. The page still asks for one glyph, and the renderer draws several shapes to satisfy it. This is why color cannot reproduce the effect and cannot fully override it either: color is a single value, and the glyph is asking for a list.

The formats settled after a long detour. Apple’s sbix and Microsoft’s CBDT store bitmaps, so they scale like images; SVG-in-OpenType embeds real SVG documents and is powerful but heavy for a text engine. The one that won for text is COLR, whose second version adds gradients, transforms, and blend modes while keeping everything as ordinary outlines that hint, kern, and interpolate like any other glyph. Because the layers are outlines, a COLRv1 face can also be a variable font, and its color layers move with the axes. The color is stored as an index into the font’s own palettes rather than as fixed values, which is the part CSS reaches: font-palette picks one of the palettes the family shipped, and @font-palette-values lets a page override individual layer colors while leaving the artwork alone.

That indirection is what makes color fonts usable rather than merely decorative. A single emoji or icon face can ship a light palette and a dark one and switch between them with a media query, which is not something an image sprite can do. It also sets the boundary of the term. Turning on a swash or a ligature is a glyph substitution inside the same one-ink drawing, and a background-clip: text gradient is CSS paint applied over a silhouette the font still drew flat. Neither is a color font. The practical cautions are the ones you would expect from any richer format: fallback is a silhouette in currentColor rather than nothing, so check that the flat version still reads; the files are larger, and a decorative COLR face has no business setting body copy; and overriding a palette is a design decision inside someone else’s drawing, so a palette that ruins the contrast between two layers is now your bug.