Source Code Pro — веб-шрифт woff2

О шрифте Source Code Pro

Source Code Pro — моноширинный шрифт, у которого все знаки одной ширины. В семействе 8 начертаний: от ExtraLight 200 до Black 900, всего 8 насыщенностей. Курсива в этом семействе нет.

Лицензия OFL (SIL Open Font License) разрешает использовать шрифт на сайтах, в том числе коммерческих. Текст лицензии лежит в файле LICENSE.txt рядом с шрифтами в архиве.

Чтобы подключить Source Code Pro, скачайте нужные начертания или весь архив, положите файлы вроде source-code-pro-400.woff2 рядом со стилями и добавьте правило @font-face с font-display: swap. Готовый CSS для выбранных начертаний собирается на этой странице. Для основного текста берите Regular 400, для заголовков — Black 900.

Как подключить Source Code Pro к сайту

Скачайте ZIP и распакуйте его. Для примера ниже нужен только файл с насыщенностью 400. Загрузите его в папку /assets/fonts/ своего сайта и сохраните LICENSE.txt из архива.

Добавьте CSS ниже в свою таблицу стилей. Если файлы лежат в другой папке, замените путь в url(). Относительный путь считается от CSS-файла, а не от страницы. Одного @font-face недостаточно - правило font-family применяет шрифт к тексту.

В примере шрифт применяется к блокам кода. Для жирного текста отдельно подключите нужную насыщенность из CSS выше. Проверьте кириллицу, цифры и знаки в вашем тексте.

Если шрифт не появился, проверьте, что файл доступен по указанному адресу, название семейства совпадает и другое CSS-правило не переопределяет font-family. Здесь доступны WOFF2 для веба; инструкции установки TTF или OTF в систему к этим файлам не относятся.

@font-face {
  font-family: 'Source Code Pro';
  src: url('/assets/fonts/source-code-pro-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

pre, code {
  font-family: 'Source Code Pro', monospace;
}