Creating a Microsoft Color Font (CPAL/COLR)

by Rainer Erich Scheichelbauer
en fr zh

23 October 2014

Microsoft proposed a format for color fonts entirely based on vectors. Glyphs allows you to create and directly export such a color font. Plus, the app takes care of the technical stuff for you.

The Microsoft approach to color fonts employs two additional OpenType tables, CPAL and COLR. CPAL describes a palette of colors, and COLR defines how the colors from CPAL are used by which glyph. Technically, what appears to be multiple colors in a single glyph, is actually multiple glyphs stacked on top of each other, each of them displayed in its individual color. But you need not worry, Glyphs will take care of all that techy stuff.

Setting up a color palette

You start by adding a Custom Parameter called Color Palettes in File > Font Info > Master. For starters, we will add one palette with three colors. So, once you added your Color Palettes parameter, double click its Value field, and increase the Count of colors to three. Double clicking a color field brings up the OS X color picker:

You can pick any color from any color scheme, even with transparency. Eventually, it will be stored as RGBA (red, green, blue, alpha) in the font file. Note that the numbers 0, 1, and 2 have been assigned to the three colors we just created. Keep that in mind for later.

Once you are done, confirm the dialog sheet by clicking OK. If everything is alright, the Custom Parameter line should indicate the number of palettes and colors:

Creating the fallback glyph

So far, so good. There is one problem though. Support for Microsoft-style color fonts, like the one we are about to make right now, is not quite universal yet. So, for all non-compliant software, we need to have an old-style black and white glyph that can be displayed just in case. We call this a fallback glyph.

As it turns out, the fallback glyph is already set up: Anything on the master layer is considered to be the fallback. So, for instance, in the Regular master of the uppercase i, we can draw our sans-serif rectangle between cap height and baseline. The little diamond symbols indicate that the nodes are exactly on the metric lines:

Adding the color layers

Now, in the Layers palette in the sidebar (Cmd-Opt-P), create a duplicate of the Regular master. You can do so by clicking the Copy button. Rename the layer to Color 0, with an uppercase c and a space before the zero. You will notice a color indicator appear on the right, showing the first color, or Color number 0:

You can add the other two colors by duplicating the color layer we just created. But this time, you do not need to change the name of the layer. Instead, you can click on the color circle, and pick any other color from the palette we created before:

Now, all we need to do, is draw our layers. I will leave the Color 0 layer as it is, and make the Color 1 and Color 2 layers the side and bottom of a three-dimensional uppercase i:

You will notice that you get a color preview as soon as any of the color layers (Color 0, Color 1 or Color 2) is selected. Activate a Master layer (Regular in our case), and you will see the fallback glyph again. In Font View, Glyphs will preferably display the color glyph:

Different palettes for instances

You can export multiple variants of your color font and have different color palettes for each of them. To make that happen, first make sure you have multiple palettes set up in the Color Palettes custom parameter you already have set up in File > Font Info > Masters. You can add palettes via the gear menu:

Note the index numbers at the top of the columns? In the above screenshot for example, there is Palette 0 and Palette 1. These are index numbers, and they are important for the next step. Now, confirm the Color Palettes dialog.

In File > Font Info > Instances, do the following things:

  1. Duplicate the color font instance you already have: select it in the sidebar, copy and paste.
  2. Change the Style Name of the instance to something that makes sense. It needs to be different for the other instance you already have.
  3. In the Custom Parameters field, add a parameter called Color Palette for CPAL (towards the end of the list). As value, pick the index number of the palette you want to apply. In our example, we want the second palette, which had index number 1:

Now export again, and this time, Glyphs will export both variants:

That’s pretty cool.

Export your font

It does not matter which format you pick, CFF/OTF, TTF, WOFF, WOFF 2, or EOT. Since all of them are OpenType-based, Glyphs will be able to insert the necessary tables for viewing. Because CPAL and COLR tables are a fairly recent technology, most apps will only display the fallback.

Some apps already support CPAL/COLR though. The good news: all major browsers now support CPAL/COLR in their current versions:

  • Internet Explorer (since Windows 8.1)
  • Firefox (since version 26)
  • Microsoft Edge (since version 38 on Windows 10)
  • Safari (since macOS 10.13 High Sierra)
  • Chrome (since version 70)
  • Android WebView (since release 71)
  • Opera (since release 58)

The two biggest downsides: Safari is out of the game in older OS versions (up to macOS 10.12 Sierra), and at the time of this writing, Chrome’s display exhibits clipping at the horizontal and vertical bounds of the fallback layer. So you want to make sure that the fallback layer is the fattest one, which encompasses all others in terms of horizontal and vertical expansion.

So, you will most likely want to test your color fonts as webfonts. If you do so, you can use the mekkablue script Test > Webfont Test HTML for creating a quick proofing HTML next to your most recent webfont exports.

Cool! Now, for all those other letters besides the uppercase i…

Update 2018-03-26: Added list of supporting browsers, Color Palette parameter, link to SVG tutorial.
Update 2018-04-14: Updated the tutorial title.
Update 2018-11-06: Updated app and browser support, improved section ‘Different palettes for instances’.