How we can use #font-face in Less - 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.

Answer 3

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 4

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;