Miguel Moura Miguel Moura - 2 months ago 41
CSS Question

Font Face Mixin for Less

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

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;
    }
}