Creating a Micro­soft color font (CPAL/‌COLR)

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 > Font. For starters, we will add one palette with three colors. The first palette, Palette 0, is already there, so all you need to do is click the plus button in the lower left corner until you see three color swatches. Clicking on a swatch will bring up he macOS color picker. For this example, I will add these three colors:

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. The alpha stands for opacity, so you can have transparent colors as well. 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 getting more and more widespread, but 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 (the layer with the name of the master, typically ‘Regular’) 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 indicators show 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. Do so by clicking the plus button, and a backup layer named after the current date and time will appear. In the Layers palette, right-click that layer and choose the layer type Color Palette:

The name of the layer changes automatically and a color circle appears next to the layer name, indicating the palette color for the layer. In order to pick the color for the layer, simply click in the color circle and choose from the pop-up:

While we are at it: the color marked with an asterisk is the user color, i.e., the color that the user can choose in the app in which he or she uses the font.

You can add the other two colors by duplicating the color layer we just created. But this time, you do not need to set the layer type anymore, just pick a different color for each:

Keep in mind that the layers are shown in chronological order: That means that the first layer will be drawn first, then the second layer will be drawn on top of the first layer, and so on. In effect, the bottommost layer is first, and the top layer comes last. That also means that you can have multiple layers sharing the same color, otherwise you would not be able to stack more complex drawings.

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:

Note that the text preview will be in colors as long as a color layer is selected. If you select a master layer (Regular in this example), the preview will be of the fallback black-and-white font.

Export and test your color font

Now we want to test our CPAL/COLR font! I know all we can write so far is IIIIII, but that is good enough for some of the avant-garde concrete poetry out there.

Whatever we want to write with it, we will have to create an instance in File > Font Info > Exports by clicking on the plus button in the lower left and choosing Add Instance from the menu that pops up:

Give your instance a sensible Style Name, e.g., referring to the basic tint of your colored shapes:

It does not matter which format you pick, CFF/OTF, TTF, WOFF, WOFF 2. 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, some apps will only display the fallback.

Most systems and apps already support CPAL/COLR though, and 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 macOS versions up to and including 10.12 Sierra.
• Chrome 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, so now for all those other letters besides the capital I…

Alternate palettes

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 > Exports, do the following things:

1. Duplicate the color font instance you already have: select it in the sidebar, copy and paste. Or Opt-drag it in the sidebar.
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. As value, pick the index number of the palette you want to apply. In our example, we want the second palette, which has index number one:

   

4. Now export again with File > Export (Cmd-E), and this time, Glyphs will export both variants:

That’s pretty cool.

Export font in black and white only

What if we want just the plain black-and-white font, without any of the color stuff in it? In other words, export the pure fallback back font without the CPAL and COLR tables. Well, we can tell Glyphs to suppress the export of the two color tables with a custom parameter called Export COLR Table in an instance in File > Font Info > Exports, and turn its value checkbox off, like so:

Then creation of both CPAL and COLR tables will be prevented in the respective instance, and you’ll get a plain, boring, foreground-background font. Boo.

Just kidding.

Useful scripts

In Window > Plugin Manager > Scripts, you will find a few script collections that contain scripts that can help you in your CPAL/COLR workflow. The mekkablue scripts have a few scripts in Scripts > mekkablue > Color Fonts:

• Add All Missing Color Layers to Selected Glyphs will add a duplicate of the fallback layer for each (CPAL/COLR) color defined in the Color Palettes parameter, for each selected glyph. Only adds colors that are still missing in the glyph. Useful for quickly getting all the layers you need.
• Convert Layerfont to CPAL+COLR Font turns a layered color font into a single-master font with a CPAL and COLR layers in each glyph. It will take the first master of the layer font as fallback.
• Delete Non-Color Layers in Selected Glyphs deletes all sublayers in all glyphs that are not CPAL/COLR layers.
• Merge Suffixed Glyphs into Color Layers moves e.g. the glyphs x.shadow, x.body and x.front into three separate CPAL layers of the glyph x:

  

In Henrique Beier’s Harbor Type Scripts, you will find a script called Copy Master into Sublayer. It copies a master into a sublayer of another master for the selected glyphs. Useful for a more controlled conversion of a layer font into a CPAL/COLR setup.

SAMPLE FONT: URLOP BY MIKOŁAJ GRABOWSKI
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’.
Update 2021-08-20: update for Glyphs 3, added section about useful scripts, and legacy notes for Glyphs 2.