Manrope — веб-шрифт woff2

О шрифте Manrope

Manrope — гротеск, шрифт без засечек. В семействе 7 начертаний: от ExtraLight 200 до ExtraBold 800, всего 7 насыщенностей. Курсива в этом семействе нет.

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

Чтобы подключить Manrope, скачайте нужные начертания или весь архив, положите файлы вроде manrope-400.woff2 рядом со стилями и добавьте правило @font-face с font-display: swap. Готовый CSS для выбранных начертаний собирается на этой странице. Для основного текста берите Regular 400, для заголовков — ExtraBold 800.

Как подключить Manrope к сайту

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

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

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

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

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Manrope', sans-serif;
}