Добавляем кириллицу в шрифт Source Sans Pro для Bootstrap-темы Lumen

В каталоге бесплатных тем для Bootstrap есть симпатичная тема Lumen, в ней используется шрифт Source Sans Pro, в котором «из коробки» отсутствует кириллица. Эту проблему можно частично решить самостоятельно, скомпилировав шрифт из исходников. Почему частично — см. заключение.


1. Устанавливаем Adobe Font Development Kit for OpenType


Скачиваем Adobe Font Development Kit for OpenType. Установка сводится к распаковке архива в какую-нибудь папку, у которой абсолютный путь не содержит пробелов, и запуску скрипта FinishInstallWindows.cmd с правами Администратора. После этого нужно перелогиниться, либо перезагрузиться.

2. Скачиваем исходники шрифта


Скачиваем с GitHub ответвление исходников шрифта и распаковываем куда-нибудь. Эта ветка содержит в себе кириллический и греческий алфавиты, которые пока еще не включены в официальный релиз.

3. Определяем необходимые начертания


Исходники шрифта содержат много различных начертаний, выясним какие именно нужны нам. Открыв файл bootstrap.css темы Lumen, в первой строке мы видим что шрифты импортируются с сервера google:
@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic");

Переходим по этому адресу, получаем описание:
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/M2Jd71oPJhLKp0zdtTvoMzNrcjQuD0pTu1za2FULaMs.woff) format('woff');
}

Это значит, что нам нужны всего четыре начертания: Light, Regular, Bold, Italic.

4. Компилируем начертания


Компиляция производится командой makeotf -r. Эта команда за один вызов обрабатывает одно начертание в текущей папке. Вместо того, чтобы ходить по папкам в консоли и каждый раз запускать команду вручную, создадим скрипт для PowerShell, который в пакетном режиме скомпилирует все необходимые файлы. За основу возьмем из корневой папки шрифта скрипт build.sh и сохраним новый файл под именем build.ps1 там же.
$family='SourceSansPro'
$romanWeights='Bold', 'Light', 'Regular'
$italicWeights='It'

# clean existing build artifacts
rm -recurse -force target
mkdir target
mkdir target\otf

foreach ($w in $romanWeights)
{
  cd Roman\$w
  makeotf -r -o ..\..\target\otf\$family-$w.otf
  cd ..\..
  rm Roman\$w\current.fpr # remove default options file from the source tree after building
}

foreach ($w in $italicWeights)
{
  cd Italic\$w
  makeotf -r -o ..\..\target\otf\$family-$w.otf
  cd ..\..
  rm Italic\$w\current.fpr # remove default options file from the source tree after building
}

Пробуем запускать скрипт .\build.ps1 с правами администратора. Если возникает ошибка безопасности, то это значит, что запуск скриптов PowerShell запрещен политикой. Чтобы разрешить выполнение вводим команду:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

После этого должно все заработать и в папке target\otf\ появятся четыре файла .otf.

5. Конвертируем .otf в .woff


Скачиваем sfnt2woff и сохраняем в папке со шрифтом. Пишем скрипт convert.ps1 для конвертации:
$otfFiles = dir target\otf -Filter *.otf -Name

# clean existing convert artifacts
rm -recurse -force target\woff
mkdir target\woff

foreach ($otf in $otfFiles)
{
  .\sfnt2woff.exe target\otf\$otf
}
mv target\otf\*.woff target\woff

После запуска скрипта в папке target\woff\ появятся переконвертированные файлы.

6. Подключаем шрифт к проекту


В случае с ASP.NET MVC, копируем .woff-файлы в папку fonts\ проекта и включаем их в него. В папке Content\ создаем новый файл bootstrap.lumen.path.css и записываем в него следующее:
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: url(/fonts/SourceSansPro-Light.woff) format('woff');
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/SourceSansPro-Regular.woff) format('woff');
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/SourceSansPro-Bold.woff) format('woff');
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    src: url(/fonts/SourceSansPro-It.woff) format('woff');
}

Добавляем в файл App_Start\BundleConfig.cs новую строку. Важно, чтобы она была ниже чем bootstrap.lumen.css.
bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.lumen.css",
            "~/Content/bootstrap.lumen.path.css",
            "~/Content/site.css"));

Заключение


На этом всё, проблема частично решена. Частично — потому что на данный момент не существует курсивного начертания для кириллицы.


Разработчик шрифта, Paul Hunt, на вопрос о курсиве ответил, что кириллица когда-нибудь появится, но он не может сказать когда это произойдет.

Архив готовых .woff-файлов можно скачать здесь.

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 7

    +1
    Вы не в курсе, появилась ли кириллица в моноширном шрифте, брате Source Sans Pro, Source Code Pro?
      +1
      Судя по репозиторию шрифта, кириллица в нем еще не появилась.
      • UFO just landed and posted this here
          +1
          пару дней назад, он сообщил, что работа ведется полным ходом. Он занимается кернингом, затем по плану cleanup. Первый релиз греческого/кириллицы появится без курсива, в течении трех месяцев, но, как он пишет — не уверен наверняка.

          так что, продолжаем ждать… А мой выбор пока пал на Monaco
        0
        И буквы «ё» нет. Для многих, её наличие/отсутствие может быть критичным.
        • UFO just landed and posted this here
          0
          Кирилица включена в основную ветку, на время написания коментария это последний релиз

          Only users with full accounts can post comments. Log in, please.