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 

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 1

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

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.