How to include fonts in LESS?

Question

Fonts

https://gist.github.com/zhdanovartur/6121601
I googled such a procedure, but somehow I didn’t figure it out, and I don’t think that the developers do not provide for connecting non-standard fonts.

Answer 1

I made a mix for this:

.font(@fontName; @urlName: @fontName; @weight: normal; @style: normal) {
  font-family: '@{fontName}';
  src: url('/fonts/@{urlName}/@{urlName}.eot');
  src: url('/fonts/@{urlName}/@{urlName}.eot#iefix') format('embedded-opentype'),
  url('/fonts/@{urlName}/@{urlName}.woff') format('woff'),
    url('/fonts/@{urlName}/@{urlName}.ttf') format('truetype'),
    url('/fonts/@{urlName}/@{urlName}.svg') format('svg');
    font-weight: @weight;
    font-style: @style;
}

Then I call it:

@font-face {
  .font(@fontRegular);
}
@font-face {
  .font(@fontRegular; @fontBold; bold);
}

Having previously set variables with the necessary fonts:

@fontRegular: 'OpenSans';
@fontBold: '@{fontRegular}-Bold';

As a result, I get ready-made CSS =)

@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans/OpenSans.eot');
  src: url('/fonts/OpenSans/OpenSans.eot#iefix') format('embedded-opentype'), 
  url('/fonts/OpenSans/OpenSans.woff') format('woff'), 
  url('/fonts/OpenSans/OpenSans.ttf') format('truetype'), 
  url('/fonts/OpenSans/OpenSans.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans-Bold/OpenSans-Bold.eot');
  src: url('/fonts/OpenSans-Bold/OpenSans-Bold.eot#iefix') format('embedded-opentype'),
   url('/fonts/OpenSans-Bold/OpenSans-Bold.woff') format('woff'), 
  url('/fonts/OpenSans-Bold/OpenSans-Bold.ttf') format('truetype'),
   url('/fonts/OpenSans-Bold/OpenSans-Bold.svg') format('svg');
  font-weight: bold;
  font-style: normal;
}

That, in fact, is all) Maybe it will be useful to someone.

Answer 2

And they shouldn't have provided for it, it's just plain css, write it as it is.