Color vector font
¶ What are color fonts?
Color fonts represent a key evolution in digital typography, introducing rich graphic features into font files. Thanks to new font formats, color fonts are finally becoming a reality for millions of creatives.
Color fonts can impact any type of text, since they may contain any type of characters, including emojis and icons.
Note that colors fonts are sometimes referred as chromatic fonts, which is actually a bit more accurate since they may include multicolored, grayed or even single-tone characters.
Standard vector font
Color bitmap font
|Apple SBIX||✔||MacOS and iOS|
|Microsoft COLR||✔||Windows (8.1 and later)|
¶ What's inside color fonts?
A color font file is actually just a regular font file that embeds additional data to display more graphic properties than the contour shapes of a character.
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 - thus leading to bitmap fonts.
So color fonts are now officially referred as OpenType-SVG fonts.
Ok, the reality is a bit more complex...
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.
Today, there are four major color font formats that fit into regular font files: SBIX, COLR, CBDT and SVG, each having it own specificities. Read the full story here or check this simplified recap:
Due to the differences and incompatibilities of these formats (for instance, in early 2017, no operating system supports OpenType-SVG fonts), the design industry will go through another transition period during which several color font formats may be needed to ensure cross-platform compatibility across several operating systems, browsers and apps.
Another solution to mitigate this issue, color fonts can also include some alternate vector shape data as a fallback solution for software that do not yet support any of the embedded color formats.
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.
As color bitmap fonts will be used in such different contexts like web or print, designers will need several versions of the bitmap font files, with full-size images for desktop editing and downscaled versions for the web.
What about file size?
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.
What about text scalability?
Good question! Color fonts based on vector glyphs can be resized without any loss, just like any regular font.
Scaled color vector font
¶ Where's the catch?
Scaled color bitmap font
¶ Where can I use color fonts?
Your favorite software is not there? Or you want to suggest an update?
Leave us a message!
Now that OpenType-SVG has been adopted as the industry standard, there is good hope that in the coming months, you will be able to use color fonts across a wide range of software and hardware.
Yet, until OpenType-SVG rules over all other color font formats, you will have to pay attention to the different color font formats and how they are supported across specific apps.
But don't worry, we are here to help, as we will keep updating a list of apps and browsers that support color fonts. So here we go:
Last update on Jan 23, 2016.
|Color fonts||Supported formats||Comments|
|Microsoft Edge||😀||SVG SBIX COLR CBDT||Since version 38 on Windows 10|
|Firefox||😀||SVG SBIX COLR||Since version 26|
|Safari||😐||SBIX||Want more? Ask on Twitter|
|Chrome||😐||CBDT||Only on Android Ask on Twitter|
|Internet Explorer||😐||COLR||Only on Windows 8.1 Ask on Twitter|
|Opera||😢||Ask on Twitter|
You can also visit the world's first color fonts collection on Creative Market.
Want more? We will post beautiful cherry-picked color fonts made by super talented designers (including some freebies).
Subscribe to our newsletter to be notified when they are released.
(We won't spam, promised ;)
Color fonts are still difficult to find these days due to their novelty. But you're lucky as we started collecting awesome color fonts:
¶ Where can I get color fonts?
Don't know which one to pick? Well, maybe you should start with the easy one! 😝
Add-on to create fonts in Illustrator or Photoshop (Mac & PC)
Are you inspired to turn your beautiful lettering into an actual font? Good news!
There are some really cool tools for that:
Disclaimer: we're part of Fontself ;)
Standalone font editor (Mac only)
Standalone font editor (Mac & PC)
¶ How can I create color fonts?
colorfonts.wtf is a project sponsored by the Fontself team
This website aims to be your one-stop place to learn everything about color fonts, to discover the latest and best color font designs, and to bring you more stories about the people behind them.