Подключение шрифтов из папки.
CSS свойство font-face.

Есть разные способы подключения нестандартных шрифтов к сайту: скриптом, с помощью сервиса Google fonts или из локальной папки сайта. Для реализации последнего из способов используют CSS-правило @font-face.

Одинаковые шрифты подключаются с одним именем, различающуюся жирность и стиль пишут в font-weight и font-style.

Для современных (с 2017 года) браузеров нужен единственный формат: woff2.

@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensans.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensansbold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

Если нужна поддержка браузеров с ~2011 года выпуска, то им потребуются форматы woff2 и woff. Вначале указывается путь к файлу woff2, затем к woff. Таким образом, если браузер умеет работать с более современным форматом шрифтов, то он применит его. Если нет, то возьмет формат woff.

@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensans.woff2") format("woff2"),
    url("fonts/opensans.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensansbold.woff2") format("woff2"),
    url("fonts/opensansbold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

Форматы ttf, eot, svg нужны только очень древним браузерам. Сейчас нет нужды их использовать.

Теперь этот шрифт можно применять к нужным блокам. Для разной жирности или начертания браузер будет подтягивать нужные файлы для правильного отображения.

div {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
}

Обязательно указывайте запасной веб-безопасный шрифт и семейство.

font-weight - соответствие слов и чисел

100 - Thin (Hairline)
200 - Extra Light (Ultra Light)
300 - Light
400 - Normal (Regular)
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)

Свойство unicode-range

CSS свойство unicode-range задает определенный диапазон символов для шрифта, определенного в @font-face и доступного для использования на странице. Если на странице нет символов из указанного диапазона, то шрифт не загружается. Если же есть хоть один символ, то загрузится весь шрифт.

Т.е. если у вас есть несколько файлов шрифта с заданными диапазонами, то загрузятся только те файлы, которые нужны для отображения набора символов на странице.

Обратите внимание, что unicode-range не разбивает сам шрифтовой файл, он только показывает нужно ли загружать этот файл, есть ли соответствующие ему символы.

Зачем может понадобиться это свойство? Например, для мультиязычных сайтов. Чтобы не грузить пользователю шрифт, в котором есть символы для всех нужных языков, можно сделать шрифтовые файлы под каждый.

Для подключения кириллицы:

@font-face {
    font-display: swap;
    font-family: "Lato";
    src: url("/fonts/lato-light/lato-light.cyrillic.woff2") format("woff2"),
        url("/fonts/lato-light/lato-light.cyrillic.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // только кириллица
}

Как это работает? Браузер анализирует ваш DOM и понимает, какие символы используются на сайте и, если есть совпадение, то шрифт закачивается. В данном примере, если на сайте есть кириллица, то lato-light.cyrillic.woff2 будет загружен и применится, а шрифт lato-light.latin.woff2 даже не закачается.

Или другой пример: вот таким способом можно применить другой шрифт только к цифровым символам:

@font-face {
    font-family: Georgia;
    src: url("fonts/fontin_sans_regular.eot");
    src: url("fonts/fontin_sans_regular.eot?#iefix") format("embedded-opentype"),
         url("fonts/fontin_sans_regular.woff2") format("woff2"),
         url("fonts/fontin_sans_regular.woff") format("woff"),
         url("fonts/fontin_sans_regular.ttf") format("truetype"),
         url("fonts/fontin_sans_regular.svg#drevodel_regular") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "drevodel_regular";
    src: url("fonts/drevodel_regular.eot");
    src: url("fonts/drevodel_regular.eot?#iefix") format("embedded-opentype"),
         url("fonts/drevodel_regular.woff2") format("woff2"),
         url("fonts/drevodel_regular.woff") format("woff"),
         url("fonts/drevodel_regular.ttf") format("truetype"),
         url("fonts/drevodel_regular.svg#drevodel_regular") format("svg");
    font-weight: normal;
    font-style: normal;
    unicode-range: U+30-39;
}

Примечание: unicode-range не работает со шрифтами подключенными через Google Fonts, необходимо локальное подключение.