How we can use @font-face in Less

Question

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

font-family: my_font

Her

Answer 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");
}

Answer 2

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.

Answer 3

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