All Collections
FAQs
Color Fonts 101
Color Fonts 101

About using & making OpenType-SVG and chromatic fonts

Mohamed avatar
Written by Mohamed
Updated over a week ago

Fontself Maker for Illustrator & Photoshop both support the creation of OpenType-SVG color font files. 

This bleeding-edge type technology comes with exciting new creative capabilities but also a set of restrictions.

OpenType-SVG, the new kid on the block 

OpenType-SVG specification includes a wide range of features like fill & stroke colors for vector shapes, gradients, opacity or even bitmap images ! Additional features like color palettes will even one day let users change specific color values of a color font.

To learn more about the magic world of color fonts (formats, compatibility,...), please visit www.colorfonts.wtf  ;)

🍎🍊🍋🍐🍏

Making color fonts with Fontself

Each version of Fontself exports a different flavor of OpenType-SVG files:

  • Fontself for Illustrator exports vector color fonts

  • Fontself for Photoshop exports bitmap color fonts

In Illustrator CC

Color opens a wide range of possibilities in Illustrator. All of them are not yet supported for glyph creation by Fontself Maker. Today, here is what is supported  

  • Fill Colors

  • Stroke Colors 

  • Gradients 

  • Opacity

And what is NOT supported:

  • Blending Modes

  • Mesh Tool Gradients

  • Bitmap mages

  • Color Palettes

Color Space

All color glyphs in OpenType-SVG fonts are saved as SVG data in the RGB color space. So we recommend to switch your Document Color Mode to RGB to ensure you see and edit the same colors in both your original artwork and the actual font. 

CMYK colors will be converted into an RGB equivalent. So to optimize color fonts for print projects, you may still pick CMYK colors when you design your typeface, to ensure color will show up accordingly on any printer.

And FYI, printing with multi-colored inks from RGB color fonts may actually lead to more vivid results than starting from CMYK colors.    

Blending Mode

Color fonts do not yet support color blending mode within glyphs, so you must split any shape that features color blending into smaller shapes, so each of them contains a single solid color. Use the method Object > Flatten Transparency... but beware of shape artifacts that may result from this operation (like slighlty altered shapes or many extra points on your paths :( 

In Photoshop CC 

To keep things simple for now, Fontself Maker for Photoshop supports only bitmaps in color fonts. We recommend to have one single transparent layer per glyph, about 500 pixels in width and height (the pixel resolution doesn't impact your font size, only the pixel count) but no larger or wider that 1000 pixels and no smaller or tighter than 300 pixels. 

This will provide sufficient quality for screen usage on Retina devices as well as small prints while keeping the font size manageable in the computer's memory. 

Usually, it’s safe to keep bitmap fonts below 50 megabytes, otherwise the extension may crash. The font size will grow depending on the size and also the complexity of the glyphs (how many colors, whether there are textures, etc.).

🍎🍊🍋🍐🍏

Using Color fonts

Adobe apps

😀 InDesign CC 2019+, Illustrator CC 2018+ and Photoshop CC 2017+ are Adobe’s only apps that officially support & display color fonts.

😞 Older versions like Illustrator CC 2017, InDesign CC 2017, Photoshop CC 2015 and earlier DO NOT support color fonts. In these apps, you will see a non-colored fallback version of the font (because Fontself includes 2 versions of your glyphs in the OpenType file, one colorful and another with black shapes for retro-compatibility).

In your font menu, Color fonts have a cool new Opentype-SVG icon.


But some usual font edition features are not supported for these fonts:

  • Change font colors

  • Add stroke

  • Add drop shadow

  • Pick font color (via Eyedropper)

Web browsers

Safari since version 12 on Mojave and Firefox (since version 26) support Opentype-SVG color fonts.

Other apps

Color vector fonts: in all other apps, you will see the non-colored fallback version of the font, as Fontself for Illustrator automatically saves a black version of your color vector glyphs. On MacOS and Windows font managers will also show this black fallback version.

Color bitmap fonts: as Fontself for Photoshop also includes a version of your font that is compatible with MacOS apps, such fonts can then be installed via any font manager like Font Book, used and displayed in most native apps like Pages, Keynote, TextEdit, Safari, and embedded in PDF files or directly printed (color fonts in PDFs will only show up on Macs).

Most third-party apps that rely on Apple’s core font technologies such as Pixelmator or Sketch also support color bitmap fonts (yet Affinity doesn’t support them so far).

PS: I’m looking for color fonts! Where can I get some? Which apps & devices will display such color fonts?

To ensure you get updated about all the progress made with this color font revolution, we are going to start a community effort to provide you with up-to-date information regarding third-party software & hardware compatibility. Simply register on www.colorfonts.wtf and we’ll send you a message when this treasure trove goes live.

Did this answer your question?