Create OpenType Color Fonts

At first the OpenType font format didn’t support multicolor fonts, but that changed in 2013. Back then several vendors came up with their own solutions for the need of color emojis in their operating systems, apps and web browsers. It probably would have made more sense if they combined forces and proposed one multi-platform color extension, but that didn’t happen, so the OpenType font format now contains four different color extensions.

OpenType COLR; initiated by Microsoft, using COLR and CPAL tables
OpenType SVG; initially proposed by Mozilla and Adobe, using SVG table (optionally along with CPAL)
CBDT/CBLC; from Google to support color emojis in Chrome
sbix; invented by Apple to add colored emojis on their devices, Macintosh (macOS), iPhone (iOS), and iPad (iPadOS); uses raster based images, e.g. png

The first two color extensions are vector based, which basically means they can scale to any dimension without losing quality. FontCreator supports these two scalable color extensions.

The COLR extension uses multi-layer glyphs which are rendered and processed like any other character, except each layer has its own color. Because it fully relies on the existing monochrome outlines, this color extension is most flexible and can also be used within variable fonts. It also has limits, as it doesn’t support gradients for example.

The SVG extension allows for more powerful graphics elements, but not all SVG 1.1 capabilities are supported. For example <a> , <text>, and <font> are not allowed, and animations and interactivity capabilities should be avoided. These should be safe to use: circles, line (stroke) thickness, clipping paths, gradients, and opacity properties. You can also include images, but better avoid them, as they are not scalable and will blow up the file size of your font.

Not all software and web browsers support the SVG extension, and some have serious flaws. So, if you use SVG, better avoid viewBox and style elements.

Add COLR to Your Fonts

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. One other important requirement is the fact that the metrics of the base glyph and the color members must be the same. So, the offsets (usually set to 0) and the advance widths must match.

To add one or more Color Glyph members, make sure you are in Color Mode and right-click in the Glyph Edit window and select Add or click the Add icon. Here, select the glyphs that you want to add to the color glyph and press the OK button. You can assign colors to specific members by selecting the Paint Bucket tool from the Drawing Toolbar and click on one of the color glyph members in the Glyph Edit window. You can change the current color by clicking on one of the palette entries in the Palette Toolbar.

One technical requirement for COLR fonts is the fact they must implement glyph index 1 as the .null glyph.

Add SVG to Your Fonts

There is no visual SVG editor in FontCreator, but you can generate the SVG color format out of the COLR extension. You can also design your SVG graphic in an external SVG editor, and then import the SVG document for each glyph. This approach is more flexible and allows for more complex outlines, but is tedious, as the coordinate systems (scale and position) don’t always match, and SVG editors tend to add a lot of overhead.

Color Palettes

The Foreground palette color is a special color that depends on the font color that the user or host application has set as the active font color.

The CPAL table is mandatory for the COLR extension. Currently the first palette is used in most software and web browsers, but that will change when web browsers start supporting the CSS font-palette property in the future.

CPAL is optional for SVG, but as far as we know it isn’t supported yet.

Web Browser Color Font Support

Web Browser	Market Share *	COLR	SVG
Chrome	65%	Yes	-
Safari	19%	Yes	Yes
Edge	4%	Yes	No ¹
Firefox	3%	Yes	Yes
Samsung Internet	3%	?	?
Opera	2%	Yes	-
IE	<1%	Yes ²	-

*) Indication as of June 2022

1) It once supported it, but not anymore as it is now based on Chromium.

2) Since Windows 8.1

Software Color Font Support

Software	Since Version	COLR	SVG
Adobe Illustrator	CC 2018	-	Yes
Adobe InDesign	CC 2019	-	Yes
Adobe Photoshop	CC 2018	-	Yes
Adobe QuarkXPress	CC 2018	Yes	Yes
Sketch		-	Yes
Affinity Designer		-	-
Word		Yes	-
paint.net	4.0 (2014)	Yes	Yes
Corel Graphics Suite	2021	Yes	-
Figma		-	-

Which Color Extension Should I Use?

If your fonts are going to be used online, then COLR is king, but for software SVG might be the best choice.

If you don’t need gradients, and use a modest number of colors per multi-color glyph, we recommend using COLR. You can then also automatically export to SVG without any additional design efforts. That way your COLR and SVG outlines will match.

COLR is supported by all major web browsers, and you can use such OpenType color fonts in more and more Windows software like Word and paint.net. The file size of OpenType COLR is usually significantly smaller than the OpenType SVG variant. Although FontCreator doesn’t support it yet, it is also good to know OpenType COLR is the only color extension that works with variable fonts.

Most Adobe software supports OpenType SVG color fonts. Several web browsers support the SVG color extension. However, it is currently not supported in Chromium-based browsers, like Chrome, Opera, and Vivaldi.

If you can’t decide, it is good to know that FontCreator allows you to export both color formats in one font, but we don’t recommend it.

More about the color extensions:

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

Updated August 20, 2022 - updated color font support tables

FontCreator Tutorials

FontCreator Product Details

Download FontCreator