Closed dippas closed 3 years ago
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
@font-face
font-family
css-vars
preserve:true
Below a Minimal Example:
(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; }
$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; }
@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; }
It was a misconfiguration in my gulpfile.
Thanks for following up! @dippas feel free to post your config so others can reference it in the future
So in a project I had to use
@font-face
and I did notice when setting thefont-family
withcss-vars
(and thepreserve:true
was on) it doesn't work in IE11, if I use the SCSS vars it works perfectlyBelow a Minimal Example:
css-vars
:(Input)
(Output)
(Input)
(Output)