How to use font-face with cssless?


Tags: css,css3,font-face,less

Problem :

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 type of CSS

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.



Solution :

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.


    CSS Howto..

    how to change element css class runtime using javascript

    How to properly display content when I resize the window?

    jquery .show() hides immediately

    CSS/PHP: How to make the next div appear on the side instead

    How to change Polymer(1.0) paper-toolbar background colour?

    CSS - How to set an elements height as a % of a container with auto height?

    how to show background image(multiple) if out of current div

    How to target CSS class names that start with digit

    How to find out if an element is in a fixed positioned container?

    How to hide and show div border line in my case?

    How does google do the barrel roll?

    How to align divs side by side without one being slightly lower?

    How do I simulate a hover with a touch in touch enabled browsers?

    How to use image tag in body of html instead of loading image from css?

    I have a div with a pseudo :after element creating a circle after it. How can I add something else inside that circle?

    How to give the background-image path in CSS?

    How can I change css stylesheet with dart?

    How can I use the CSS pseudo-element :before{ content: '' } to affect an

    How can I differentiate unordered lists in CSS?

    Using CSS3 how to animate the multiple `background-image` for different view ports

    How to align jQuery div to bottom left corner using CSS?

    How do I align these pictures vertically?

    Not sure how to use css selectors

    Using CSS to create custom borders with just the corners showing

    How do i rotate text in css

    how to set css property of one class from another class

    How to do Background Image horizontal slide

    How to change an image on mouseover of wrapper div

    My footer keeps moving after updating other parts of my code. How do i fix this?

    How to make mouse hover not shift background downward? (Beginner CSS)