Как подключать шрифты в LESS?

Question

[KurtsKhalia]

https://gist.github.com/zhdanovartur/6121601
Нагуглил такую процедуру, но я как-то не разобрался, и не думаю, что разработчиками не предусмотрено подключение нестандартных шрифтов.

Answer 1

[lenaShelest]

Я для этого сделала примесь:

.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;
}

Потом вызываю её:

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

Предварительно задав переменные с необходимыми шрифтами:

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

На выходе получаю готовый 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;
}

Вот, собственно, и всё) Может кому будет полезно.

Answer 2

[Назар Мокринский]

А они и не должны были предусматривать, это же обычный css, пишите как есть.

Comments

[KurtsKhalia]

Ну так вроде у них переменные задаются примерно также, как и фонтфейс.

[Назар Мокринский]

KurtsKhalia: И что? Такое впечатление что вы хотите усложнить то, что является простым.