I have a little LESS mixin for simplifying font face stuff
.fontface(@font){
@font-face {
font-family: '@{font}';
src: url('../fonts/@{font}.eot');
src: local('☺'), url('../fonts/@{font}.woff') format('woff'), url('../fonts/@{font}.ttf') format('truetype'), url('../fonts/@{font}.svg#webfont5SwbW1jA') format('svg');
font-weight: normal;
font-style: normal;
}
}
On my local computer (OS/X), running lessc on
.fontface(@font){
@font-face {
font-family: '@{font}';
src: url('../fonts/@{font}.eot');
src: local('☺'), url('../fonts/@{font}.woff') format('woff'), url('../fonts/@{font}.ttf') format('truetype'), url('../fonts/@{font}.svg#webfont5SwbW1jA') format('svg');
font-weight: normal;
font-style: normal;
}
}
.fontface('MyFont');
.fontface('MyOtherFont');
returns
@font-face {
font-family: 'MyFont';
src: url('../fonts/MyFont.eot');
src: local('☺'), url('../fonts/MyFont.woff') format('woff'), url('../fonts/MyFont.ttf') format('truetype'), url('../fonts/MyFont.svg#webfont5SwbW1jA') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MyOtherFont';
src: url('../fonts/MyOtherFont.eot');
src: local('☺'), url('../fonts/MyOtherFont.woff') format('woff'), url('../fonts/MyOtherFont.ttf') format('truetype'), url('../fonts/MyOtherFont.svg#webfont5SwbW1jA') format('svg');
font-weight: normal;
font-style: normal;
}
however running it on our build server (CentOS 6.2) returns
@font-face {
font-family: 'MyFont';
src: url('../fonts/MyFont.eot');
src: local('☺'), url('../fonts/MyFont.woff') format('woff'), url('../fonts/MyFont.ttf') format('truetype'), url('../fonts/MyFont.svg#webfont5SwbW1jA') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MyFont';
src: url('../fonts/MyFont.eot');
src: local('☺'), url('../fonts/MyFont.woff') format('woff'), url('../fonts/MyFont.ttf') format('truetype'), url('../fonts/MyFont.svg#webfont5SwbW1jA') format('svg');
font-weight: normal;
font-style: normal;
}
Why are both mixins returning the same on our build server but working fine locally?
Both computers report the same less version.
Sams-MacBook-Pro:Desktop sr$ lessc -v
lessc 1.3.0 (LESS Compiler) [JavaScript]
[sr@egdjnk01 ~]$ lessc -v
lessc 1.3.0 (LESS Compiler) [JavaScript]
I've run npm -g update less on both, but I'm still receiving different behavior.
I think it's something to do with @font-face, if I remove that and replace it with a dummy class name the output is fine.
A work-around for now, suggested by @ScottS in
this answer
, is to put the .fontface mixin inside @font-face blocks manually defined, like so
.fontface(@font){
font-family: '@{font}';
src: url('../fonts/@{font}.eot');
src: local('☺'), url('../fonts/@{font}.woff') format('woff'), url('../fonts/@{font}.ttf') format('truetype'), url('../fonts/@{font}.svg#webfont5SwbW1jA') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face{
.fontface('MyFont');
}
@font-face{
.fontface('MyOtherFont');
}
which now gives the correct output from both compilers.