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

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

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