can fonts have a forced background color specified in the TTF?

Question

I'm trying to investigate creating my own custom fonts. I've done some reading, and since I know nothing about fonts, I have a question that I haven't been able to find the answer for.

Can you define a font where the font's color is static? For example, I would like the create a font where each A has a blue background, the B has a yellow background, etc. The reading I've done seems to indicate that you need to convert the font into either black or white. Is my understanding correct, and forcing a specific color in a font, especially a background color is not supported?

Answer 1

A font doesn't have a color, so you're right, you can't force a specific color in a font file. However, you can apply any color you want when the font is in use.

Answer 2

Support depends on your OS/browser version, but OpenType 1.7 supports multicolor fonts, and there are multiple options.

• COLR/CPAL tables: This is a multilayered scalable vector approach where a single glyph can have multiple color layers, similar to earlier multilayer fonts approaches that use multiple separate fonts instead. The outlines are standard 'glyf' table outlines like monochrome fonts. It's supported in IE on Windows 8.1 and FireFox 40.0.3 (try Segoe UI Emoji). http://www.microsoft.com/typography/otspec/colr.htm https://www.microsoft.com/typography/otspec/cpal.htm *Note I actually worked on this proposal some, so it's the one I know most about.
• SVG inside OpenType: This also a scalable vector approach, storing SVG outlines inside the OpenType container. It is supported on FireFox 26. http://lists.w3.org/Archives/Public/public-svgopentype/2013Jul/0003.html
• CBDT/CBLC tables: This stores color embedded bitmaps, similar to the old EBDT table which was only monochrome. http://www.microsoft.com/typography/otspec/cblc.htm http://www.microsoft.com/typography/otspec/cbdt.htm
• SBIX: This stores images (PNG/JPG/TIFF) inside TrueType, supported on iOS4+ and OSX 10.7+. https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6sbix.html.

The first two have the advantage of scalability regardless of device, but they lack fine pixel-level detail. The last two have the advantage of offering fine detail in the images, but they look pixelated or blurry when used at sizes other than the intended sizes.

Roel Nieskens has a nice write up here, including a test page that shows your current browser's support for the different approaches: http://pixelambacht.nl/2014/multicolor-fonts/

Multi-color fonts were not supported in the OpenType 1.6 specification directly, but you still had options...

• Create an atlas texture of all the glyphs (basically a large bitmap used in conjunction with CSS sprites). Games use this approach, with the caveat that they are not scalable - not without pixelation anyway.
• Overlay the text of multiple OpenType fonts. Multi-layered OpenType is an approach graphics designers use (such as in In-Design). It's a bit weird to create multiple fonts, one for each color, but it works. You would overlay the floating spans translucently atop each other.
• Use an SVG font (in the subset of browsers that support it) via InkScape. SVG fonts are scalable and support multiple colors (actually pretty much anything that SVG does), but they have limited support: Opera 9+ or Chrome 4+, but not IE10 or FF.
• Use SVG components directly. It's not a true "SVG font", but you can still programmatically correlate each character to its corresponding SVG part (assuming we're in the ASCII range, not any character in the whole of Unicode). All current browsers support SVG: Opera9, IE10, FF3, Chrome4, Safari3.2.

Answer 3

you can with layered color fonts: https://www.glyphsapp.com/tutorials/creating-a-layered-color-font