Colorfont White displays as Black

I have a layered colorfont with 22 color layers (Glyphs-Version: 3.0.3). One of the layers is white (#FFFFFF). After exporting as .otf the white layer renders as black in some applications (Safari, Finder Preview, Drawbot, OTMaster):
Screenshot 2021-04-12 at 14.44.28

Though it looks fine in Google Chrome and Adobe programs:

Does this have to do with how the program interprets white?

Some apps can’t handle color fonts. Those will show the default layer. With so many color that are not used in all glyphs, you might like to use this method: Creating a Microsoft Color Font (CPAL/COLR) | Glyphs

Argh, sorry I linked to the wrong tutorial Georg. The font is already set up as Microsoft Color Font. As far as I can understand the browser should display the fallback layer, when it does not support colorfonts right? But it’s still a black square in Safari, even though the contour directions in the fallback layer (“Color”) is correct.


The strange thing is that all other 21 colors are displayed correctly in all mentioned programs.

If I change the color of the layer from white to anything else (e.g. light grey #F0F5F5) it works fine everywhere:
Screenshot 2021-04-12 at 15.47.50
It’s just white that seems to be the problem.

@GeorgSeifert
Just to clarify. The colorfont with the white layer works fine in Google Chrome, but not in Safari. All the other colors are not affected.

Google Chrome:


Safari:

How did you define the white? And you exert as plain COLR/CPAL or as SVG?
Could you send me the .glyphs and the .otf file?

I tried different attempts in defining the white: RGB, Hex, Greyscale, picking from predefined color, etc. Every Color seems to work, but as soon as I get too close to #FFFFFF the layer turns black.
I just send you the files via DM.

Just dropped it in to wakamaifondue in Safari and White is defined as #FFFFFF, but still shows up black in the glyphs (see uni23E9, arrows should be white) :sweat_smile:

I found the problem and fixed it. The problem is with the SVG table and grayscale colors. So for now, define the color as RGB and it should work. Or don’t export as SVG as Safari will display the COLR/CPAL table just fine.

And the path direction is wrong in the envelope glyph. All black paths need to be counter clock wise and all counters clock wise.

Thanks a lot @GeorgSeifert. Could you send the fixed file back to me?

The fix is in Glyphs, not in the file. Will be in the next cutting edge version.

2 Likes