How to Create Variable Color Fonts?

David Massara

Hello,

I'm creating this topic because, after several hours of research across various websites, I still haven’t found a proper answer to my question. I mainly use FontLab 8 (with some knowledge of Glyphs 3), and while I'm not particularly an expert in font production, I’m working on a project that involves creating illustrations using the variable font process and incorporating color.

Although FontLab 8 has introduced support for color in recent versions, exporting a variable color font is not yet possible without using additional methods. From what I understand, the process involves exporting the variable font (in .ttf format) and the COLRv1 + CPAL tables separately and then merging them afterward.

My question is: what is the correct method to achieve this, and is this indeed the right solution? I tried generating a TTX file for the variable font and naively integrating the COLR and CPAL tables through two separate instances without success, considering there are two masters (Regular + Bold).

Does anyone know of a method using FontLab and FontTools to correctly export a variable color font?

For reference, I checked these websites or topics:

https://nabla.typearture.com/whatisCOLRV1.html

https://www.typearture.com/howdotheywork/

https://typedrawers.com/discussion/comment/59471#Comment_59471?utm_source=community-search&utm_medium=organic-search&utm_term=variable+color

https://css-tricks.com/colrv1-and-css-font-palette-web-typography/

https://ishadeed.com/article/creating-a-variable-font/

https://www.harbortype.com/rocher-color-making-a-variable-color-font/

Thank you!

Georg Seifert

You can do it in Glyphs for CORLv0: Follow this tutorial on how to set up palettes and color layers: Creating a Microsoft color font (CPAL/COLR)
You just need to set up the color layer in each master and export as variable font. I attached a small sample file and the resulting .ttf.
This is how the layer are structured:

Thomas Phinney

David Massara said:

Although FontLab 8 has introduced support for color in recent versions, exporting a variable color font is not yet possible without using additional methods. From what I understand, the process involves exporting the variable font (in .ttf format) and the COLRv1 + CPAL tables separately and then merging them afterward.

FontLab 8 can export color variable fonts directly, including COLRv1+CPAL.

I think version 8.4 may include a profile out of the box for it (I have one in my own setup, but I might have added it). If not, then:

• Do File > Export Font As….
• Choose the Variable TT profile, click Customize….
• Change the Profile name to something appropriate such as “Variable TT COLRv1”. Turn on “OT+COLR: Chrome Windows” in the Export color font files section. Click OK.
• Choose your destination and export.

David Massara

Thank you, Georg and Thomas, for your feedback! I tried to customize the export by including the COLR table as Thomas suggested, but it didn’t work. I realized that the issue was due to one of the elements in a master having a different color than its corresponding element in the other master.

Thank you, guys, for shedding light on this topic, regarding FontLab and Glyphs. I feel a bit embarrassed that the solution was right in front of me from the beginning!