ChromaCheck is a feature test to check if browsers support one of the four color font formats.

We test for color font support by rendering color glyphs to canvas, and then reading out the pixels to see if we have any color.

Firefox (on OSX?) has a bug that prevents color glyphs from being used on canvas with fillText(). This has been fixed for locally installed fonts but still needs more fixin' for fonts loaded through @font-face. ChromaTest works around this by sticking the font in an SVG image, and then drawing that image on canvas.

Include chromacheck-min.js in your page and it'll add classes to the html element for each supported color format:

• chromacheck-svg if there's support for SVG-in-OpenType.
• chromacheck-colr if there's support for COLR/CPAL.
• chromacheck-sbix if there's support for Apple SBIX.
• chromacheck-cbdt if there's support for CBDT/CBLC.

Take note that this test is async, so it can take a split millisecond before the classes are added.

ChromaCheck is released under the MIT license.