Miguel Moura Miguel Moura - 1 year ago 327
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?#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
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,

Answer Source

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-family: @family;
        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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download