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 have the less mixin:

.font(@family: arial, @size: 1.0em, @lineheight: 1.0, @weight: normal, @style: normal, @variant: normal) {
  font: @style @variant @weight @size~"/"@lineheight @family;
} // font

Finally I use it like this:

p {
  .font(@georgia, 1.0em, 1.5)
}

But I would also like to define font families with custom fonts:

@something: 'custom-font', arial, ...;

But first I need to register custom-font:

@font-face {
  font-family: 'custom-font';
src:url('fonts/custom-font.eot');
src:url('fonts/custom-font.eot?#iefix') format('embedded-opentype'),
    url('fonts/custom-font.woff') format('woff'),
    url('fonts/custom-font.ttf') format('truetype'),
    url('fonts/custom-font.svg#icon') format('svg');
font-weight: normal;
font-style: normal;
}

Is it possible to create a LESS mixin for @font-face so I can pass the font name and path and register fonts without repeating all this code?

I am not sure how to integrate this with my font mixin ...

Or if there is even a better way to do this ...

Thank You, Miguel

Answer 1

You could define your custom mixin for including custom fonts, but since LESS does not implement any control directives, only guards for mixins (which are useless in the current question's aspect), you cannot shorten the mixin's code for the font-face definition.

.include-custom-font(@family: arial, @weight: normal, @style: normal){
    @font-face{
        font-family: @family;
        src:url('fonts/@{family}.eot');
        src:url('fonts/@{family}.eot?#iefix') format('embedded-opentype'),
            url('fonts/@{family}.woff') format('woff'),
            url('fonts/@{family}.ttf') format('truetype'),
            url('fonts/@{family}.svg#icon') format('svg');
        font-weight: @weight;
        font-style: @style;
    }
}

Answer 2

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)

Answer 3

I like to structure my fonts on folders, like this:

/fonts/OpenSans-Bold/OpenSans-Bold.eot
/fonts/OpenSans-Bold/OpenSans-Bold.svg
/fonts/OpenSans-Bold/OpenSans-Bold.ttf
/fonts/OpenSans-Bold/OpenSans-Bold.woff

And i use this LESS MIXIN for font-face:

.font-face(@fontName: sans-serif; @fontWeight: normal; @fontStyle: normal) {
    @font-face {
        font-family: @fontName;
        src: url('@{pTheme}/fonts/@{fontName}/@{fontName}.eot');
        src: url('@{pTheme}/fonts/@{fontName}/@{fontName}.eot?#iefix') format('embedded-opentype'),
             url('@{pTheme}/fonts/@{fontName}/@{fontName}.woff') format('woff'),
             url('@{pTheme}/fonts/@{fontName}/@{fontName}.ttf') format('truetype'),
             url('@{pTheme}/fonts/@{fontName}/@{fontName}.svg#@{fontName}') format('svg');
        font-weight: @fontWeight;
        font-style: @fontStyle;
    }
}

Where:

@pTheme: "../../themes/[THEME NAME]";

Mixin call example:

.font-face('OpenSans-Bold');

I've made the @pTheme variable so i can use it also on background images, like this:

background: url("@{pTheme}/images/logo.png") no-repeat;