Font Face Mixin for Less

Question

Using Less I am defining font-families as follows:

@georgia: georgia, times, \'times new roman\', \'nimbus roman no9 l\', serif; 

Then I ha

Answer 1

I know its an old post BUT, I solved this issue like this, hope it helps somebody else.

First I created a parametric mixin with everythign that will repeat inside the @font-face:

.loadFont(@Weight; @Name; @Local; @Eot:'@{Local}.eot'; @Woff:'@{Local}.woff'){
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: @Weight;
    src: url(@Eot);
    src: local(@Name), local(@Local), url(@Eot) format('embedded-opentype'), url(@Woff) format('woff');
}

Then loaded all my web fonts (in this case open sans)

@font-face {.loadFont(100;'Roboto Thin';'Roboto-Thin')}
@font-face {.loadFont(300;'Roboto Light';'Roboto-Light')}
@font-face {.loadFont(400;'Roboto Regular';'Roboto-Regular')}
@font-face {.loadFont(500;'Roboto Medium';'Roboto-Medium')}
@font-face {.loadFont(700;'Roboto Bold';'Roboto-Bold')}
@font-face {.loadFont(900;'Roboto Black';'Roboto-Black')}

Then created a second parametric mixin with the CSS rule to apply to the elements

.font(@weight:400; @size:14px; @font-family:'Open Sans', sans-serif){
    font:@arguments;
}

And finally I use it on my elements like this

div.someClass{
    .font(); //to accept all default parameters 
}
div.otherClass{
    .font(100; 40px); //to specify weight and size
}

As a side note. I have all my *.eot and *.woff files next to the LESS file and named as the @Local parameter (Open-Sans.woff || Open-Sans.eot)