I followed the Microsoft (CPAL/COLR) tutorial and found in this forum post the two parameters needed to make the font work in Adobe Apps (Color Layers to SVG and Export SVG Table). And it works in both web browsers and Illustrator / Indesign. Great!
BUT I have a few instances set up each with their own palette - they display their different colors in web browser but in Illustrator each instance shows the same colors as the first instance set as ‘Color Palette for CPAL [0]’
I’ve included (I think) the important details from my Glyphs file below- what am I missing to make the different palettes display with the different instances of the font?
On the same topic I have a color variable font setup the same way that displays perfectly in Chrome and Firefox but not in Safari - I read here that Safari is one of the best browsers for handling color variable fonts is that true? If so what do I have wrong?
THANKS
Font > Custom Parameters > Color Palettes (5 Palettes 10 colors)
Exports > Custom Parameters:
Color Palette to CPAL (set to 0, 1, 2 etc for a palette per instance)
Color Layers to SVG
Export SVG Table
Export COLR Table
Color Layers to COLR
Export = Remove Overlap and Autohint Turned off
Running the latest version of Glyphs 3.2
macOS Sonoma 14
Illustrator 28
Safari v17.0
Heya! There are currently some issues with Safari (version 17) and CPAL/COLR fonts. This should be fixed in version 17.2.
About the different browsers: My post is a bit old, but performance-wise, it’s still the best, especially with more intricate glyphs. Chrome and Firefox animations are not as smooth as those of Safari, although their previews are far better than what they used to be.
About Adobe programs: You export parameters can do without some things:
Color Layers to COLR is not required: If you followed the tutorial your export is already COLR-ready. The “Layers to SVG” is for the other way around.
If you export your color layers to SVG, you will also have to include a “Color Palette to SVG” parameter, otherwise SVG will pick the first one (I believe this is the reason you are seeing the same instance).
Re: Safari - great to know it’s not just me I’ll stop tearing my hair out and wait patiently for 17.2 (weirdly I noticed the color variable fonts display correctly on Safari on iphone, which is good)
Re: Illustrator - I switched off Color Layers to COLR and added Color Palette to SVG and it works perfectly now.
Again, thanks very much for taking the time to help.
Suggestion: If it isn’t there already it might be helpful to add those parameters to the end of the Microsoft CPAL/COLR tutorial, OR for anyone finding this thread and wanting to use that method and export color fonts for use in Adobe add the Custom Parameters:
• Color Layers to SVG
• Export SVG Table
• Color Palette for SVG
Yeah, its worthwhile to give it a small update. Another thing which might not always be clear: It’s best to add the following custom parameters (and activate them) but to uncheck the tickbox after the property:
Export SVG Table
Export COLR Table
Otherwise you get a lot of decomposed characters (next to your normal characters) in your Illustrator/InDesign glyphs panel.
Hey Arthur happy new year.
Quick question on this topic. I’ve made two fonts with the setup we discussed and they work fine in Illustrator, InDesign and online.
I’ve just started an idea to refit one of my existing fonts as a color font with the same methods - as a test I have so far only made the A color layers the rest are standard pre-existing glyphs with no color applied yet.
When I export the test it works perfectly as a WOFF2 online, and when installed in FontBook it displays the color A glyph correctly and the rest in black - but InDesign and Illustrator display the A as black as all the others. I can’t see how the setup is any different to my successful fonts other than those were made as color fonts from the start.
So to the quick question; Do all of the glyphs have to have color layers applied for the color glyphs to display correctly in Adobe apps?
If not any ideas why this is happening?
This might have to do with COLR layers, as Illustrator and Indesign only support SVG (mind, I found out that if you export an RGB PDF from InDesign using a font with only COLR layers and no SVG info it does work!).
The amount of color layers shouldn’t matter: it will only show the layers which are in the glyph, or a fallback if there are none.
So be sure: Are SVG layers exported from the file with the same settings as your other two fonts? And are they assigned to the right instance?
Another way to check is to outline your “A” in illustrator: does it show the color outlines (instead of the, probably solid, fallback) in black? Then it’s a COLR-support issue.
Hope this helps with the troubleshooting, otherwise we’ll have to delve a bit deeper.
Thanks Arthur!
Yes same settings:
Color Palette for CPAL: 0
Color Layers to SVG: Checked
Export SVG Table: Unchecked
Export COLR Table: Unchecked
Color Palette for SVG: 0
A quick update on this one - I was exporting a variable font and testing that. I tried it again as a static OTF and the color works in Adobe! A breakthrough but also strange because my other font that works is also variable…
I have three colors each at 80% opacity to have some overlap I tried to see if making them all 100% made them work as variable but the TTF still goes to black in Adobe, although the WOFF2 works online.
I was hesitant to apply to the whole font but since I have static working in Adobe and variable working online that’s enough to go ahead. Maybe it will resolve when all of the glyphs have the same treatment…(?)
As an aside to one of our previous chats - when I export like this
"add the following custom parameters (and activate them) but to uncheck the tickbox after the property:
Export SVG Table
Export COLR Table"
I still get all of the decomposed components in the glyphs panel in Illustrator(?)
Not really a problem though.
So you are sure the one with issues isn’t a variable font? As variable color fonts in Adobe apps do not work, only the static versions do. (a variable color font doesn’t have SVG layers).
Having color layers in all glyphs should not be an issue, but if you are unsure you can always run by deleting the extra glyphs in a testfile.
About the COLR/SVG table: could you check by just exporting the font as an SVG layered color font (remove the COLR lines) and see what happens in illustrator? The layers should not show up.
A variable font can have SVG layers, but those are not variable. So not useful. CORL/CPAL can be variable. And this is what you see if you test in a browser. So you really need to be careful what tables you have in your font. And what tables are supported.
Thanks Arthur / Georg.
I did have some issues with unchecking those Export Table boxes, with them off the font went back to black online and in FontBook. But all switched on and not trying to use it as variable in Adobe this is all good thanks very much for your help.
Another question - if you make diacritics and then try and automatically generate accented characters from the components, those don’t inherit the color layers and revert to black, correct ? that’s what happened to me anyway. Is there a way to automatically generate the accented characters with this CPAL method?
Thanks Georg, I just tried that I’m using the latest update 3.2 (3234)
When I generate the accented characters from the base glyph and the comb glyph they don’t carry across the color layers so they appear as black. If I then go into, for example Á aacute - I can then manually add the layers in the same way I did for the base glyph (they each have 4 colors) and they pick up the forms from the original component, but to do it that way isn’t really feasible. Have I understood correctly?
Thanks again
I had made a sample font and it worked in FontGoggles. But is seems that there are problems that makes it not show the color in browsers. I’ll have a look.
Hello again!
I suddenly thought I had misunderstood and that the precomposed accented characters just didn’t preview in color in Glyphs but exported fine… but they appear as solid black when exported as well…
Georg can I ask, how did you make your sample font that was working?
Thanks
Hey Arthur, I’m still puzzling over making color accented characters automatically from the base glyph that has color layers and diacritic with a color layer (at the moment they just appear in Glyphs and export as black unless i go in and add the layers to each one).
It looks like you have a full character set in (the incredible) Niklaas
Was that the same CPAL process? Any tips welcome!
Thanks Arthur! This seems to work - running the script the glyphs display color instead of black.
I only noticed this because my layers have transparency, something the script is doing is duplicating all of the layers as well - so the combined glyphs appear much richer in color (because they are basically two sandwiched together). Will try and fix that manually for now.
No problem, Michael came up with the script And yeah, depending on how your components are combined, or how many layers there are, it can sometimes duplicate. If they consist of a lot of different elements, it’s sometimes handy to “pre-compose” your glyph components in stand-alone (non-exporting) glyphs.
And yeah, depending on how your components are combined, or how many layers there are, it can sometimes duplicate. If they consist of a lot of different elements, it’s sometimes handy to “pre-compose” your glyph components in stand-alone (non-exporting) glyphs.