Can I use CSS variables in a font list and have it work in legacy browsers?

Question

I'd like to use a CSS variable to store a font in case the user doesn't have the specified font installed.

Example:

:root {
     --common-font: Comic Sans MS;
}

.header1 {
     font-family: CoolFont1, var(--common-font);
}

Will legacy browsers break if I add a reference to the variable in the font names?

https://caniuse.com/#feat=css-variables

Answer 1

Yes, it will break, you must use fallback font for legacy browser without using CSS variables.

For example:

   .header {
       font-family: sans-serif; /* This is fallback font for old browsers */
       font-family: var(--common-font);
    }

Also you can use a @supports condition with a dummy feature query:

.header {
    @supports ( (--a: 0)) {
      /* supported */
      font-family: var(--common-font);
    }

    @supports ( not (--a: 0)) {
      /* not supported */
      font-family: sans-serif; /* This is fallback font for old browsers */
    }
}