Hello
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?
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.
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.