38

In Less, it seems almost impossible to use @font-face selector. Less gives errors when I try to use 

font-family: my_font

Here is how I try to use it:

@font-face {
    font-family: my_font;
    src: url('http://contest-bg.net/lg.ttf');
}
p {
    font-family: my_font, "Lucida Grande", sans-serif;
}

There is simple escape in Less using ~"..." but can't come up with working code.
Had someone used it successfully?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
Alex Kolarski
  • 3,255
  • 1
  • 25
  • 35
  • 3
    I've never had problems with @font-face in LESS. I am using the PHP implementation though, so I'm guessing it's a flaw in the original one. You might want to try putting "my_font" in quotation marks (dunno if it will help, but certainly won't make things worse, hehe). – mingos Dec 01 '11 at 08:23
  • What version of less.js are you using? And in what environment? When I try your code in the browser or with WinLess it gives no error, and compiles correctly. – Mark Lagendijk Dec 01 '11 at 13:59
  • I use @font-face in many of my project along with lesscss with no problem. Check which version of lesscss you are using though, as some older versions did not support this property. You shouldn't have to use the escape technique at all. – Jonathan Miller Dec 04 '11 at 21:30

4 Answers4

38

Have you tried putting the font family name in single quotes? The following works just fine for me.

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

    }

To use font as a mixin, try:

.ffbasic() {
    font-family: ff-basic-gothic-web-pro-1,ff-basic-gothic-web-pro-2, AppleGothic, "helvetica neue", Arial, sans-serif;
}

then within a style declaration:

.your-class {
     font-size: 14px;
     .ffbasic();    
}
HandiworkNYC.com
  • 10,914
  • 25
  • 92
  • 154
  • Yeah this is working for me as well. It also works with no quotes on the file in the url and single quotes still on the format. – Rooster Mar 23 '12 at 20:11
6

One other note to the voted answer above; make sure that your mixin does not have parenthesis so that it is parsed when compiled into CSS.

Full Example:

** In Your Variables LESS File:**

// Declare the path to your fonts that you can change in the variables less file

@path-fonts:    '../fonts';

** In Your Mixins LESS File:**

.font-names
{

    @font-face {

        font-family: 'open-sans-light';
        src: url('@{path-fonts}/open-sans/OpenSans-Light-webfont.eot') format('enbedded-opentype'),
             url('@{path-fonts}/open-sans/OpenSans-Light.ttf') format('truetype'),
             url('@{path-fonts}/open-sans/OpenSans-Light-webfont.woff') format('woff'),
             url('@{path-fonts}/open-sans/open-sans/OpenSans-Light-webfont.svg#open-sans-light') format('svg');

    }

}

** In Your Nested Rules LESS File:**

@import 'your variables less file name';
@import 'your mixin less file name';

@font-face {

    .font-names;

}

Note: That the ".font-names" definition does not have the () behind it.

Leo
  • 61
  • 1
  • 2
1

I think it's because you are missing the font format. Which for ttf is truetype, if it's missing or incorrect the font might not be loaded.

@font-face {
  font-family: "MyFont";
  src: url("./my-font.ttf") format("truetype");
}
Brian Di Palma
  • 7,043
  • 3
  • 19
  • 15
1

My LESS code:

@fontName: 'FontName';
@fontWeights: 'Light', 'Medium', 'SemiBold', 'Bold', 'ExtraBold';
@fontWeightsNum: 300, 400, 500, 600, 700;

.fontFace(@indexPrefix: 1) when (@indexPrefix =< length(@fontWeights)) {
    @fontWeight: extract(@fontWeights, @indexPrefix);
    @fontWeightNum: extract(@fontWeightsNum, @indexPrefix);

    @fontFullName: "@{fontName}-@{fontWeight}";
    @fileName: "../fonts/@{fontFullName}";
    @font-face {
        font-family: @fontName;
        font-weight: @fontWeightNum;
        font-style: normal;
        font-display: swap;
        src: local('@{fontFullName}'),
            url('@{fileName}.woff2') format("woff2"),
            url('@{fileName}.woff') format("woff");
    }

    .fontFace(@indexPrefix + 1);
}
.fontFace();
@f: '@{fontName}', "Helvetica Neue", sans-serif;

Get:

@font-face{
    font-family:FontName;
    font-weight:300;
    font-style:normal;
    font-display:swap;
    src:local('FontName-Light'),
        url(../fonts/FontName-Light.woff2) format("woff2"),
        url(../fonts/FontName-Light.woff) format("woff")
}
x5

And you can use:

font: 300 16px @f;
GrimCap
  • 31
  • 5