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:
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. But starting in Windows 8.1, Internet Explorer can display the color glyphs nicely:
Cool! Now, for all those other letters besides the uppercase I…