Change Palette of CPAL font with CSS

Hello :wave:
I’ve read that it’s possible to change (and override) the color palette of a CPAL color font on the web with CSS. e.g.
base-palette: 7;
override-colors: 0 #fff, 1 #F3B0EB;

I’ve exported different palettes applied to different instances previously, is it possible to export all of the palettes into one instance / one font file? If so, how / with what parameters?

Thanks

This is default when you don’t select a specific palette for an instance.

Thanks Florian!
So should the Color Palette for SVG parameter be left as “No selection” or switched off all together?
Screenshot 2024-08-15 at 9.46.06 AM

I don’t have experience with SVG color fonts and selecting palettes in CSS and instead expected you to use the COLR table. Is SVG better supported than COLR for your use case or why are you using SVG?

Good point Florian - those parameters were from a previous thread but thinking about it again.
Most browsers support SVG and COLR font types (although COLR is preferred due to CSS accessibility & file size). Chrome does not support SVG fonts. Testing just COLR Table.
The SVG is for desktop apps.

Color formats are still a bit of a mess. I would offer different configurations for desktop and web.

1 Like

Sadly this doesn’t really work for SVG fonts, these are exported in their final “chosen palette”, as SVG fonts don’t have the mechanics to control separate colour ranges. It does work with COLR/CPAL because the palette can be read separate from the other font information.

But even if SVG contained other palettes: There is currently no desktop app which can interact with palette settings (the same way that even current COLR-supporting apps such as Affinity give no control over the chosen palette and revert to the default).

My usual solution is to create multiple exports (in different palettes) to make sure the user can access all versions. Not the most elegant solution, but it works and is foolproof.

If your font isn’t that complex/large, you could think about using a stylistic set for different color settings: These are easily accessible in most desktop apps and work for SVG. You won’t swap a palette, but use one main palette which includes all the base colours and alternatives.