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