Color fonts are still pretty rare to find these days due to their novelty. But you're lucky as we started collecting awesome color fonts.
Color fonts is an OpenType-SVG font which has all or just some of its glyphs represented as SVG (scalable vector graphics) or bitmap artwork. This allows the display of multiple colors and gradients in a single glyph.
OpenType-SVG color fonts allow text to be shown with these graphic qualities, while still allowing it to be edited, indexed, or searched. They may also contain OpenType features that allow glyph substitution or alternate glyph styles.
Color fonts like Bungee Color and EmojiOne Color will appear just like typical fonts in your programs’ font menus — but they may not display their full potential, since many programs don’t yet have full support for the color components. If your software program doesn’t support the SVG artwork within the fonts, glyphs will fall back to a solid black style. Color can still be applied to this fallback style, as it will work like a typical OpenType font.
Color fonts are now generally stored as SVG data inside OpenType font files. This SVG (Scalable Vector Graphics) format can hold vector shapes with color or gradients, and may also include bitmap images.
A color font file is generally larger than a regular font file, and a lot more when the font embeds high-resolution bitmap characters.
Whereas fonts usually weigh tens to a few hundred kilobytes, color vector fonts can reach hundreds of kilobytes to a couple megabytes depending on their visual complexity.
Color bitmap fonts may range from a few megabytes to tens of megabytes, and sizes increase when multiple color font formats are embedded in a single file.
Color fonts based on vector glyphs can be resized without any loss, just like any regular font.
Color bitmap fonts, like any other photo or pixel-based image, will scale properly up to a certain size, depending on their original resolution. Beyond that resolution, the lettering will look pixelated. So whether you print a text with a color bitmap font or display it on high resolution screens, you will have to check up to which size it could properly scale.
The OpenType-SVG font format was initially designed by Mozilla & Adobe and became an industry standard in early 2016, when other big players including Microsoft & Google agreed on a single format to support color fonts.
All of them (including Apple) have previously developed and implemented their own proprietary color formats to display emojis on their operating systems, while many other companies built other custom color font technologies for the gaming, video or print industries.
There are several conceptual approaches for "color fonts" that can be considered, in increasing order of complexity (read more here):
There are now four major color font formats that fit into regular font files, in increasing order of complexity:
Each having it own specificities. Read the full story here or check this simplified recap:
|Adobe & Mozilla SVG||check_circle||check_circle||macOS 10.14+, iOS 12+, Windows 10+|
|Apple SBIX||cancel||check_circle||macOS and iOS|
|Microsoft COLR/CPAL||check_circle||cancel||Windows 8.1+|
Now that OpenType-SVG has been adopted as the industry standard, there is good chance that you can start using color fonts across your favorite software and hardware.
We keep updating a list of apps and browsers that support color fonts. Here we go:
|App||Color fonts||Supported formats||Comments|
|Photoshop||check_circle||SVGSBIX||PS CC 2017 and above|
|Illustrator||check_circle||SVGSBIX||AI CC 2018 and above|
|InDesign||check_circle||SVGSBIX||ID CC 2019 and above|
|QuarkXPress||check_circle||SVGSBIXCOLR/CPAL||QuarkXPress 2018 and above|
|Pixelmator||check_circle||SVGSBIX||macOS 10.14 Mojave and above|
|Sketch||check_circle||SVGSBIX||macOS 10.14 Mojave and above|
|Affinity Designer||check_circle||SVG||macOS 10.14 Mojave and above|
|Web browser||Color fonts||Supported formats||Comments|
|Microsoft Edge||check_circle||SVGSBIXCOLR/CPALCBDT/CBLC||Version 38 and above on Windows 10|
|Safari||check_circle||SVGSBIXCOLR/CPAL||Version 12 and above on macOS 10.14 & iOS 12|
|Firefox||check_circle||SVGCOLR/CPAL||Version 26 and above|
|Internet Explorer||check_circle||COLR/CPAL||Only on Windows 8.1|
|Opera||check_circle||COLR/CPAL||Only on Windows|