How to set font stack in CSS custom property

Question

I want to map one of the modern font stacks to a CSS custom property so I can change them globally when I use 2 different fonts.

Currently I add a token "font-secondary" with the non-primary font attached to it. But I'd like to make singular tokens where I could use the var(--font-family) when making specific tokens.

Oleg Isonen · Answer

Is comma separated values list not working? 'Arial, Verdana'

Jeremy · Answer

I think so; I meant from the pre-selected font-families that were added not long ago.

Oleg Isonen · Answer

You want to put the premade stack into a variable?

Jeremy · Answer

yes, this is correct.

Oleg Isonen · Answer

that doesn't work, but stacks are not magic, its just a list of fonts, you can create your own

Oleg Isonen · Answer

https://modernfontstacks.com/the one we are using

Jeremy · Answer

Ok, thanks. Side note: I'm trying to get this MFS built into our products at my actual job. I learned about it from this discord and love it.

John Siciliano · Answer

you can import font stacks from open props too https://github.com/argyleink/open-props/blob/main/src/props.fonts.css

Join the Webstudio community

How to set font stack in CSS custom property