How we can use @font-face in Less

sensor picture sensor · Dec 1, 2011 · Viewed 72.3k times · Source

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?

Answer

HandiworkNYC.com picture HandiworkNYC.com · Jan 10, 2012

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