How to use font-face with cssless?

Question

There have been a bit of talk about issues with cssless and font-face already, for example here: How we can use @font-face in Less

But this problem seems to be a different one, and I wonder whether anyone has found workaround to this? I think my less syntax is right though.

If I write the following:

.setFont (@fontName) {
    @font-face {
        font-family: '@{fontName}';
        src: url('../fonts/@{fontName}.eot'); 
        src: url('../fonts/@{fontName}.eot?#iefix') format('embedded-opentype'), 
        url('../fonts/@{fontName}.ttf')  format('truetype');
    }
}
.setFont ('myfont1');   
.setFont ('myfont2');   
.setFont ('myfont3');

It will output the following:

@font-face {
  font-family: 'myfont1';
  src: url('../fonts/myfont1.eot');
  src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'),
  url('../fonts/myfont1.ttf') format('truetype');
}
@font-face {
  font-family: 'myfont1';
  src: url('../fonts/myfont1.eot');
  src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'),
  url('../fonts/myfont1.ttf') format('truetype');
}
@font-face {
  font-family: 'myfont1';
  src: url('../fonts/myfont1.eot');
  src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'),
  url('../fonts/myfont1.ttf') format('truetype');
}

It only takes the first variable. I wonder whether it is because they aren't called inside an element - though I did try to call it inside an element as well, with identical results.

How do you use cssless with font-face?

Thanks.

Answer 1

It is doing this because variables are not technically variables in LESS but constants, and therefore can not be redefined.

So when you are are defining @fontName the first time, it can not be redefined. Which is why you are getting duplicates. Unfortunately, you cannot use them like parameters (like setting border-radius(@radius), which it looks like what you were hoping to do. Its nuanced, but there is a difference.

The way you are using it is as a variable(constant), the way you'd like to use it, but can't, is as a parametric mixin. If its easier to think about it in terms of scope. You are setting a global variable in this case, as opposed to a local variable for that particular selector. When you are setting border-radius for example, you are setting it within a selector, thus making it a local variable for that selector. In your example above you are not applying .setFont to a selector, where it can be used as a local variable, but instead setting it as a global one.

The only way you might be able to pull this off is using @arguments, but it may take just as much code as just writing out the individual @font-face statements. Since @font-face is technically a selector itself, it will always be used in a manner that treats variables used in reference to it as global.