Prepend to Default Theme Variable

[alexschcom]

Hey there,

I'm trying to use a custom font. I'd like to use the value of font-sans as the fallback and I don't want to create a separate utility class (like font-main). I know I can't do

@theme inline {
  --font-sans: "Space Grotesk", var(--font-sans);
}

as that creates a cyclic dependency --

Custom properties are left almost entirely unevaluated, except that they allow and evaluate the var() function in their value. This can create cyclic dependencies where a custom property uses a var() referring to itself, or two or more custom properties each attempt to refer to each other.

Is there any way I can prepend the name of my custom font to font-sans?

Thanks in advance!

[wongjn]

You could consider adding the raw default value into the definition manually:

@theme {
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}