Добавляем кириллицу в шрифт 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-файлов можно скачать здесь.