Variable COLR font

Glyphs
1

Is it possible to make something like this as an icon font? A variable axis to control which parts are colored in? I assume I could achieve this with a variable font + COLRv0? Or would it require COLRv1?
https://twitter.com/jimniels/status/1622781656468963328

2

The way Apple has implement this in SF Symbols is closer to substitutions in a font. So you would not need a variable font, but instead a font feature like cv01 or ss01 where you substitute glyphs for other glyphs, like:

sub volume.0 from [volume.1 volume.2 volume.3];
1 Like
3

Thanks for the info, very interesting. Are they’re any good resources about implementing something like that? I’m a noob at font creation.
Could I then change which glyph is used with font-variant-alternates or font-feature-settings in CSS?

4

Yes, CSS can do this kind of features. I would recommend you use a separate feature for each icon, but depending on your use case, it might be better to use a single feature for all icons.

For example, for a Wi-Fi icon, create the normal glyph that is used when no features are applied (let’s call it wifi) . Then, create alternative icons with more or less signal strength bars filled in (wifi.1, wifi.2, and so on). The glyph names are up to you.

Then, add a cv01 feature with code like this to the font:

sub wifi from [wifi.1 wifi.2];

In CSS, use font-feature-settings to access the icon alternatives:

.some-element {
    font-feature-settings: 'cv01' 1;
}

The number at the end selects the alternative (0 for no alternative).

1 Like
5

But it could be done with feature variations. Either with bracket layers or probably easier in this case with multiple glyphs and manually written variation feature code.

So you do not variate the color but switch out the whole glyph. This can be done using COLRv0 or SVG or even SBIX.

With COLRv1 it should be possible to actually animate the colors. But Glyphs can’t do that, yet.

1 Like
6

Which would also have the benefit over the option using ss00/cv00 that you get a working slider (or range) for free. With feature-settings you’d have to implement the swapping range yourself in each UI, in case you want use a slider for example.

1 Like