title: Can I use CSS variables in a font list and have it work in legacy browsers?
body: <p>I'd like to use a CSS variable to store a font in case the user doesn't have the specified font installed. </p>
  
  <p>Example: </p>
  
  <pre><code>:root {
       --common-font: Comic Sans MS;
  }
  
  .header1 {
       font-family: CoolFont1, var(--common-font);
  }
  </code></pre>
  
  <p>Will legacy browsers break if I add a reference to the variable in the font names? </p>
  
  <p><a href="https://caniuse.com/#feat=css-variables" rel="noreferrer">https://caniuse.com/#feat=css-variables</a></p>