Join the Webstudio community

Updated 2 months ago

How to set font stack in CSS custom property

At a glance

The community member wants to map a modern font stack to a CSS custom property so they can change the fonts globally when using two different fonts. They currently use a token "font-secondary" with the non-primary font attached to it, but would like to create singular tokens where they can use var(--font-family) when making specific tokens.

The comments discuss using comma-separated font lists, pre-selected font-families, and putting the premade stack into a variable. Some community members suggest that using font stacks doesn't work, but they can create their own, and mention the Modern Font Stacks and Open Props as resources for font stacks.

Useful resources
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.
O
J
J
8 comments
Is comma separated values list not working? 'Arial, Verdana'
I think so; I meant from the pre-selected font-families that were added not long ago.
You want to put the premade stack into a variable?
yes, this is correct.
that doesn't work, but stacks are not magic, its just a list of fonts, you can create your own
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.
Add a reply
Sign up and join the conversation on Discord