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

I wasn't aware of that css feature, so thanks for introducing it. :-) — johey, Dec 19 '18 at 07:46
Anyway, I think you would be better of using less or sass. Then you can use variables without any problems; your less/sass will be converted to css and it will work in all browsers. It's very easy to learn (it's like css with variables and functions). — johey, Dec 19 '18 at 07:48
@johey LESS/SASS will not replace CSS variable, they don't have the same purpose — Temani Afif, Dec 19 '18 at 08:21
@temani-afif Less/sass support variables (cf. http://lesscss.org/features/#variables-feature / https://sass-lang.com/guide). That is serving the same purpose as css variables, no? — johey, Dec 19 '18 at 08:32
@johey LESS/SASS are preprocessor in order to generate CSS code, so the variable used there aren't at the CSS level unlike CSS variable that are available within the CSS code and that we can manipulate with JS and other CSS, etc ... so no, they aren't the same — Temani Afif, Dec 19 '18 at 08:34
@temani-afif Maybe css variables indeed offer some extra functionalities (like external manipulation - I wonder what could be the use of that though), but in this case those are not needed. For this use case a css preprocessor really looks the way to go. More on this debate here: https://css-tricks.com/difference-between-types-of-css-variables/ — johey, Dec 19 '18 at 08:53
@johey I am not debating if in this case they are useful or not or what it's better. I simply highlight the fact that the LESS/SASS variables aren't the same as CSS variables. Which one is better remain opinion based. And in case you want some use cases here is: https://stackoverflow.com/a/49750566/8620333 / https://stackoverflow.com/q/53239880/8620333 / https://stackoverflow.com/a/49618941/8620333 / https://stackoverflow.com/a/52851246/8620333 (and many more) — Temani Afif, Dec 19 '18 at 09:05
@temani-afif Wow, that indeed looks very powerful. Thanks for the info. :-) — johey, Dec 19 '18 at 09:10
@johey please don't serial upvote :), it can be bad for you. The system will detect this as supicious and will remove them — Temani Afif, Dec 19 '18 at 09:14

dreyhiflden · Accepted Answer · 2018-12-20T10:48:25.970

15

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 */
    }
}

edited Dec 20 '18 at 10:48

answered Dec 19 '18 at 07:51

dreyhiflden

194
1
4

5

I would probably add how to use a fallback to make the answer complete – Temani Afif Dec 19 '18 at 08:22
2

Why is this not an answer? The question was "Will legacy browsers break if I add a reference to the variable in the font names?". Answer here: "Yes it will". If the OP wants a better answer I think he should reformulate his question. :-) – johey Dec 19 '18 at 08:55

score -2 · Answer 2 · answered Jan 26 '21 at 09:35

Definitely, it will break in legacy browser. However I think one can use postcss-css-variables plugin to do the conversion. So that you can keep on using the CSS variable feature, but do not need to worry too much on legacy browser. When those legacy browsers fades out, you can just remove the plugin.

Checkout https://www.npmjs.com/package/postcss-css-variables for details.

It also has a playground, which you can play around to see how it behaves.

For example,

    :root {
        --color-background: #ffaaaa;
        --font-color: #2222ff;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --color-background: #aaaaff;
            --font-color: #ffFF22;
        }
    }

    body {
        background-color: var(--color-background);
    }
    
    p {
        color: var(--font-color);
    }

will be convert to

    body {
        background-color: #ffaaaa;
    }

    @media (prefers-color-scheme: dark) {

        body {
            background-color: #aaaaff;
        }
    }
    
    p {
        color: #2222ff;
    }
    
    @media (prefers-color-scheme: dark) {

        p {
            color: #ffFF22;
        }
    }

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

2 Answers2