Conditional based on `font-variation-settings`

[jayliu50]

Hi,

I'm still trying to wrap my head around some basic concepts, so apologies if this is too basic of a question...

I'm trying to conditionally support a variable font. I want the following to apply to all elements:

* {
      font-family: Work Sans, sans-serif;
      @supports (font-variation-settings: normal) {
        fontFamily: Work Sans Variable, sans-serif;
      }
}

I'm trying to do the following but it doesn't work:

const theme = Typography({
  overrideStyles: ({ adjustFontSizeTo, rhythm }, options, styles) => ({
    "*": {
      fontFamily: ["Work Sans", "Trebuchet MS", "sans-serif"].join(","),

      "@supports (font-variation-settings: normal)": {
        fontFamily: ["Work Sans Variable", "Trebuchet MS", "sans-serif"].join(
          ","
        ),
      },
    },
  }),
})

Any advice on how to best implement this concept using typography.js?

Thank you!!!