It has been quite a few years since the first full-colour characters arrived in fonts, in the form of emoji, dating back to OS X 10.7 and 10.8, in the Apple Color Emoji font. These break the tradition that a character consists of a stroked outline, within which is a solid fill, both normally rendered in whatever colour is set. As you will have noticed, when you use emoji, those characters come with their own fixed colours, determined by the appearance of that character.
Emoji are a special case which we’ve learned to love or hate, and coped with their differences across each platform. But what if you could get full-colour fonts which do other useful things? This article explains how you can.
As you might expect, there’s now not one but four different font formats to support colour. The format with the best support, across macOS, iOS and Windows 10, is based on the combination of OpenType and SVG (Scalable Vector Graphics), which was introduced as a standard in 2016. This includes both vector and bitmap variants, and you’ll have to be cautious when selecting fonts to ensure that they include vector support.
macOS and iOS also support Apple’s earlier SBIX format, which only offers bitmap characters, and was the basis for the original Apple Color Emoji font. You may also come across Google’s CBDT format which is Android-specific, and Microsoft’s older COLR format which it introduced in Windows 8.1.
Although earlier versions of macOS and iOS have at least partial support for colour fonts, to get the best out of them you’ll need macOS Mojave and iOS 12, with Safari version 12. I bought Wooden Tiles font from Creative Market, which consists of wooden tiles from the word game Scrabble. Others on offer for modest cost are more flashy or arty, but this comes as an OpenType-SVG in vector format which works excellently in Mojave.
As you can imagine, these new colour fonts are significantly larger than regular fonts: each face of Wooden Tiles is more than 30 MB, compared with normal OpenType fonts which are seldom more than 500 KB. But they work almost everywhere, even where they’re not supposed to.
In Font Book, the Regular font may not look spectacular in its greys, but if you want to lay a Scrabble game up, this is so much easier than using individual images, and because these are vector format, they scale to any size that you might wish.
Here they are, the top row Regular, the lower one ‘Italic’, which means the tiles are slightly skew-whiff. They’re available to any app which can use OpenType fonts, here my own RTF editor DelightEd, also Pages, Nisus Writer Pro, and so on.
Before I bought the font I read Adobe’s cautionary information about using colour fonts in PDF: according to this, they’re not currently supported by the PDF standard. But those macOS apps can still create perfectly good PDFs using them. The one snag is that, like so many custom fonts, they don’t readily decode into meaningful text. But the PDFs still work in all other respects, with any app which handles the format, including Adobe’s own Acrobat Reader and Acrobat ‘Pro’.
The one snag that I did hit was with HTML, which seems to be the main driver behind colour fonts in design: even though saving my RTF as HTML did call for the font to be used, opening that HTML in Safari resulted in font substitution. And of course if you want to use a colour font in a public web page, you’ll have to license the font for that purpose, which is normally priced according to the number of views.
Whether these will prove generally useful or not, if you’re interested in design and unusual fonts, it’s worth exploring. My entry point was this page from Fontself which has a short technical explanation and some examples. Use this page to test whether your web browser and OS supports the different colour font formats. A second page from Pixel Ambacht explains more technical detail, and Adam Twardoch from FontLab explains much more here.
After several years in gestation, maybe colour fonts are going to see more extensive use.