Introduction

At first, the OpenType font format didn't support multicolor fonts. That changed in 2013, when several vendors introduced their own solutions to meet the need for color emojis in operating systems, apps, and web browsers. I still remember attending the AtypI 2013 conference in Amsterdam, where it was officially announced that color would be added to the OpenType specification. At the time, there was no consensus on which format to adopt. The decision was made to let all of the major players involved — Microsoft, Apple, Google, Mozilla, and Adobe — each propose their own solution.

Back then, it was already clear to me this would fragment the landscape. In fact, in 2014 I wrote on the High-Logic forum that this would lead to a kind of "font color war" between competing formats. More than a decade later, we're still living with the consequences: OpenType supports four different color extensions.

• COLR/CPAL — Microsoft's table-based system with layered glyphs and palettes.
• SVG — Mozilla and Adobe's proposal, embedding SVG graphics (optionally with CPAL).
• CBDT/CBLC — Google's bitmap-based color format, historically used for Android/system emoji fonts.
• sbix — Apple's raster image format (PNG, JPEG, etc.) for macOS, iOS, and iPadOS.

Of these, only COLR/CPAL and SVG are scalable vector-based formats. Both are supported in FontCreator, making them the most practical choices for type designers.

FontCreator on Windows and macOS

Since September 2024 FontCreator runs natively on both Windows and macOS, and every feature — including color font editing — ships on both platforms. The color workflow is the same on each: you work in Color Mode, build layered glyphs in the Members panel, and paint them from the Palette panel with the Paint Bucket tool.

A few interface conventions differ between the two platforms, and they're worth knowing before you start:

• Menus. On Windows the menu bar sits inside the FontCreator window; on macOS it's in the global menu bar at the top of the screen.
• Modifier keys. Where Windows uses Ctrl, macOS uses Cmd (⌘).
• Panels and color controls. On Windows, panels such as Members and Palette can be docked to an edge, floated, or tabbed together, and toggled with function-key shortcuts (for example Shift+F8 for Members and Shift+F2 for Palette). On macOS the layout is fixed — the panels can't be repositioned, and color members are managed from the Masters and Layers panel rather than a separate Members panel.

The color-font concepts are the same on both platforms, but the exact controls differ enough that the workflow below is written out separately for each.

COLR/CPAL

COLR defines color glyphs as stacks of monochrome outlines, each painted in a palette color. Because it reuses standard outlines, it integrates seamlessly with variable fonts and keeps file sizes compact.

Strengths: lightweight, scalable, variable-font friendly.

FontCreator creates COLRv0 color fonts: layered glyphs filled with flat palette colors. COLRv0 doesn't include gradients, so when a design needs gradients or other complex effects, use SVG instead (see below). Note that COLRv1 (a later extension) adds gradients, transforms, and compositing and is widely supported except in Safari — FontCreator currently authors COLRv0.

Adding COLR in FontCreator

To make a layered multi-color glyph, you add other glyphs as color members and then assign a palette color to each one. Unlike composite glyph members, you can't change the size or position of color members, so design each contributing glyph to fit the color glyph exactly, sharing the same advance width.

On macOS:

1. Enter color mode. Choose View → Edit Color Layer → Color COLR. (The other option, Monochrome, is the normal single-color outline mode.)
2. Add a color member. Right-click in the glyph editor and choose Add Color Member — or right-click in the Masters and Layers panel and choose Add Color Member — then select the glyph to use as the color member.
3. Give the member a color. The easiest way is to click the color ball for that member in the Masters and Layers panel and pick a color from the palette. Alternatively, use the Paint Bucket toolbar tool and click the member to fill it with the current color.
4. Edit palettes and set the current color. Shift-click the Paint Bucket, or choose Tools → Palette Manager, to edit palettes and colors and to choose the active color the Paint Bucket applies.

On Windows:

1. Show the Members panel (Shift+F8) and the Palette panel (Shift+F2); dock or float them as you like.
2. Switch to Color Mode in the Glyph Edit window.
3. Add the member glyphs: right-click → Add, or click the Add icon in the Members panel, then select the glyphs to include.
4. Paint each member. Choose the Paint Bucket tool from the Drawing Toolbar and click a member to fill it with the current color; pick the current color by clicking an entry in the Palette panel. You can also click the color ball for a member in the Masters and Layers panel to set its color directly.

Implementation notes

• Ensure the metrics (advance widths) match across the color glyph and the glyph members it uses.
• Early COLR specs mandated that glyph index 1 be the .null glyph. This is no longer a requirement in the current specification.

SVG

The SVG extension embeds an SVG document per glyph. It enables richer graphics, including:

• Clipping paths, gradients, stroke widths.
• Opacity and filter effects.
• Embedded raster images (PNG/JPEG via <image> elements).

Only a restricted subset of SVG 1.1 is valid in fonts: <a>, <text>, and <font> are not allowed, and animation or interactivity should be avoided.

Best practices:

• Avoid relying on complex CSS, external resources, animation, or interactivity. If you use viewBox, test carefully in your target applications because SVG-in-font rendering support is inconsistent.
• Favor vectors; raster images inflate file size and don't scale well.

Adding SVG in FontCreator

FontCreator doesn't include a built-in SVG editor — and editing SVG is currently only supported on Windows. You can either:

• Export SVG automatically from a COLR glyph, or
• Import SVG graphics from an external editor. This gives maximum flexibility but can be tedious, since coordinate systems often need adjusting and external editors produce bloated markup. Make sure you are in Color Mode, then right-click in the glyph editor and select Color -> SVG -> Load SVG from File.

Color Palettes (CPAL)

The CPAL table defines reusable color palettes:

• The Foreground color links to the user's chosen text color.
• COLR: CPAL is required; currently most apps use only the first palette, though CSS font-palette will bring more control in browsers.
• SVG: CPAL is optional and not widely implemented.

You manage palettes in the Palette panel / Palette Manager, which works identically on Windows and macOS.

Web Browser Color Font Support

Notes: Market Share indication as of July 2025. Edge supported SVG from 2017, but not anymore since 2020, when it moved to Chromium. The Chromium project has no plans to add OT-SVG support.

Software Color Font Support

Notes: COLR/CPAL is an outline-based color format with layered glyphs in flat palette colors; no embedded bitmaps. Most native macOS apps that use CoreText support it. OpenType-SVG stores SVG documents and can include both vector shapes and embedded raster images (e.g., PNG/JPEG via the SVG <image> element), plus gradients/opacity/filters. OpenType uses SVG 1.1 with restrictions; feature support varies by app/OS. macOS generally requires 10.14+ for SVG font rendering. Large raster content can increase font size.

Which Color Extension Should I Use?

• For the web, COLR is the clear choice: compact, reliable, variable-font compatible, and universally supported in browsers.
• For desktop publishing, it depends. While more and more software supports COLR, some still only recognize SVG. It may be best to provide both formats so end users can decide which one to use.

Guidance:

• If gradients are unnecessary, prefer COLR. You can then export to SVG for compatibility, ensuring both formats share the same outlines.
• If gradients or complex rendering are essential, use SVG.
• Avoid packaging both COLR and SVG in one font; while technically allowed, it bloats the file and risks inconsistent rendering.

References

• Microsoft COLR specification
• Microsoft SVG specification
• High-Logic forum: Installing and Using a Color Font (2014)
• Online color font test (Monstre)