2

I am trying to define custom mixin in Less, but it seems doesn't work right for me.

It looks like this

.font-face(@font-family, @filepath){
  @font-face {
    font-family: @font-family;
    src: url('../fonts/@{filepath}.ttf') format('truetype');
  }
}

I think I'll add some more properties to it, but this is just for the start. Then I'm applying it

.header {
  .font-face(Rubik, Rubik);
}

And it doesn't work. It doesn't give any error and isn't showed at the Dev Tools.

What can cause the problem? And how to fix this?

seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
Stan
  • 130
  • 2
  • 9
  • See https://github.com/less/less.js/issues/582 for some examples. Your code is pretty much correct (except that you need to make sure that the only format you provide is actually enough to be recognized/used by your browser. Then make sure that the '../fonts/@{filepath}.ttf' file actually exists and is available to the browser). Aside of that note that `@font-face` directive may only appear at the root of the CSS (it's OK to put it into `.header` since Less will bubble it out of the `.header {}` automatically - but keep that in mind when searching for it in the Dev Tools). – seven-phases-max Sep 26 '19 at 20:14
  • And of course remember that the font won't be used until you'll point to it with `font-family`. E.g. `.header {font-family: Rubik}` (And it's not the same `font-family` rule as the one inside `@font-face`). – seven-phases-max Sep 26 '19 at 20:20
  • @seven-phases-max, can you combine those comments into an answer? – jkdev Sep 27 '19 at 00:00
  • @jkdev I rather voted to close it as a duplicate (besides it smells too much like "help me with debugging" thing). – seven-phases-max Sep 27 '19 at 00:19

0 Answers0