variables inside @font-face doesn't work in IE11

[dippas]

So in a project I had to use @font-face and I did notice when setting the font-family with css-vars (and the preserve:true was on) it doesn't work in IE11, if I use the SCSS vars it works perfectly

Below a Minimal Example:

• using SCSS with css-vars :

(Input)

:root {
  --open: 'Open Sans';
}

@font-face {
  font-family: var(--open);
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
  url(data:application/font-woff2;charset=utf-8;base64, XXXXXX)
  font-weight: 400;
  font-style: normal;
}

(Output)

@font-face {
  font-family: 'Open Sans';
  font-family: var(--open);
  src: local("Open Sans Regular"), local("OpenSans-Regular"),
  url(data:application/font-woff2;charset=utf-8;base64,XXXXXX)
  font-weight: 400;
  font-style: normal;
}

---

• using SCSS with SCSS vars :

(Input)

$open: 'Open-Sans';

@font-face {
  font-family: $open;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
  url(data:application/font-woff2;charset=utf-8;base64, XXXXXX)
  font-weight: 400;
  font-style: normal;
}

(Output)

@font-face {
  font-family: 'Open Sans';
  src: local("Open Sans Regular"), local("OpenSans-Regular"),
  url(data:application/font-woff2;charset=utf-8;base64,XXXXXX)
  font-weight: 400;
  font-style: normal;
}

[dippas]

It was a misconfiguration in my gulpfile.

[MadLittleMods]

Thanks for following up! @dippas feel free to post your config so others can reference it in the future