@font-face mixin

[gr33my]

Hey,

This is more a suggestion/inquiry and not so much a issue.

I would liek to be able to create a @font-face mixin and its not working. I'm pretty sure this is because what I want to do is outside of the current scope of LESS.

Heres my proposed mixin:
// Fontface

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

If there is an existing way of achieving this awesome, i'd love to learn, but if not i think this would be a pretty powerful addition and also have other applications for other mixins!

Loving Less!!!

Cheers!

[Anahkiasen]

I'm not sure you can concatenate this way in LESS, I'm not sure but I think it would be more something like
src: url("../fonts/@{fontfile}-webfont.eo"); src: url('../fonts/@{fontfile}-webfont.eot?#iefix') format('embedded-opentype'),

And so on.

[gr33my]

ah ok awesome, i'm not sureprised im doing something wrong! i'll give that a try. Thanks!

[gr33my]

Thanks so much, exactly what i was doing wrong. Heres what it should look like

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

and then

Thanks again!

[gr33my]

I think I had an error in my previous code snippet. this is the correct one:

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

However i came across a new issue. (please keep in mind I use Codekit which is still in beta so that might be an issue). When i use my mixin once:

.font-face('TitilliumText22LThin', titilliumtext22l001);

It works fantastic! However if i declare a second mixin:

.font-face('TitilliumText22LThin', titilliumtext22l001);
.font-face('MyriadProBCond', myriadproboldcond);

It outputs strangely. It just duplicates the first @font-face declaration twice. I will assume it is reading the @font-face as a font face variable and not seeing the second mixin values.

Can anyone shed some light on this?

[souldreamer]

You're facing the same problem as the one in issue #699

[gr33my]

Here is my solution.

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

Notice I use a standardized file path and naming convention so you may have to alter and add a path variable. the link to #666 has an example of this.

Then to call each @face-font you just do:

@font-face {
        .fontface(FontName1, FontFile1);
        }
@font-face {
    .fontface(FontName2, FontFile2);
    } 

[rsschouwenaar]

Thanks! I was looking for this!

[nitriques]

I have a issue related to this one.

If I try

#font-face(@fontfamily) {

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

#font-face(@font-helvetica-light);
#font-face(@font-helvetica-medium);
#font-face(@font-helvetica-bold);

My four implementation will have the value of @font-helvetica-light... Why is the parameter keeping it's value. I fixed it by doing

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

@font-face {
    #font-face(@font-helvetica-light);
}
@font-face {
    #font-face(@font-helvetica-medium);
}
@font-face {
    #font-face(@font-helvetica-bold);
}

But I would prefer the first way. Thanks!

[lukeapage]

this looks like a bug. if you get it with 1:3:1 can you raise a new issue? thanks

[nitriques]

Is 1.3.1 released yet ?

[lukeapage]

yes.

[nitriques]

Well, I pushed 1.3.1 to cdnjs. Will test it as soon as it get merged.