Skip to main content

FontCreator Tutorials

Create OpenType Color Fonts

(Originally published March 17, 2020 – last updated September 1, 2025)

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 format for color emoji in Chrome.
  • 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.

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.
Limits: COLRv0 has no gradients; COLRv1 (introduced later) adds gradients, transforms, and compositing.

Adding COLR in FontCreator

To make a layered multi-color glyph, you need to add other glyphs and then define a color for each of these color members. Unlike composite glyph members, you can’t change the size or position of these color members. You will need to make sure that the individual glyphs are all designed to fit into the color glyph.

    • Show the Members panel (Shift+F8) and the Palette panel (Shift+F2).
    • Switch to Color Mode in the Glyph Edit window.
    • Right-click → Add (or click the Add icon in the Members panel).
    • Select the members glyphs to include.
    • Use the Paint Bucket tool to assign palette colors.

    Implementation notes

    • Ensure the metrics (advance widths) match across the color glyph and the used glyph members.
    • 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 <style> and viewBox, as some apps render them incorrectly.
    • 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. You can:

    • 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.

    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.

    Web Browser Color Font Support

    Web Browser Market Share COLR Support SVG Support
    Chrome 68% Yes –
    Safari 17% Yes Yes
    Edge (Chromium-based) 5% Yes –
    Firefox 3% Yes Yes
    Samsung Internet 2% Yes –
    Opera 2% Yes –
    Internet Explorer <1% Yes –
    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

    Software COLR/CPAL Support SVG Support
    Adobe Illustrator Yes (v29.3 / 2025+) Yes (CC 2018+)
    Adobe InDesign – Yes (CC 2019+)
    Adobe Photoshop Yes (2025+) Yes (CC 2017+)
    QuarkXPress Yes (2018+, incl. COLRv1) Yes (2018+)
    Affinity Designer Yes –
    Affinity Publisher Yes –
    Sketch (macOS) COLRv0 Yes (macOS 10.14+)
    Microsoft Word (Windows 10/11) Yes Yes
    Microsoft PowerPoint (Windows 10/11) Yes Yes
    Microsoft Excel (Windows 10/11) Yes Yes
    LibreOffice Yes (6.3+) Partial
    paint.net (Windows) Yes –
    CorelDRAW Graphics Suite – Yes
    Figma – –
    Procreate (iPad) COLRv0 Yes
    Adobe After Effects / Premiere Pro – Yes (2025+)
    Inkscape – Partial
    Scribus Partial –
    GIMP Partial –
    Notes:
    COLR/CPAL is an outline-based color format (v0 = layered glyphs; v1 adds gradients, transforms, and compositing). No embedded bitmaps. Most native macOS apps that use CoreText support COLRv0. COLRv1 is not supported yet in CoreText.
    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 COLRv1 where possible, or fall back to SVG.
    • Avoid packaging both COLR and SVG in one font; while technically allowed, it bloats the file and risks inconsistent rendering.

    References

    Updated August 20, 2022 - updated color font support tables

    Updated September 25, 2024 - updated color font support tables

    Updated August 27, 2025 - updated color font support tables

    Updated September 1, 2025 - updated color font support tables

    FontCreator Tutorials
    FontCreator Product Details
    Download FontCreator