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