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

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

Подключение из локальной папки сайта

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

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

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

@font-face {
  font-family: "OpenSans";
  src: url("fonts/open-sans-bold.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/open-sans.woff2") format("woff2"),
  url("fonts/open-sans.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OpenSans";
  src: url("fonts/open-sans-bold.woff2") format("woff2"),
  url("fonts/open-sans-bold.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;
}

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

Почему не указываем local

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

Стоит ли использовать Google fonts?

Раньше был аргумент, что файлы шрифтов, загруженные из Google fonts кешируются и с большой долей вероятности уже будут в наличии у пользователя. Но теперь (2025) это не так. Вот подробная статья на Хабре: До свидания, Google Fonts. Последний аргумент

Подробности о Google CSS API

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)

Что будет, если нет файла с нужной жирностью

Алгоритм следующий:

• Если задано значение выше 500, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
• Если задано значение менее 400, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
• Если задано значение 400, будет применено 500. Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400.
• Если задано значение 500, будет применено 400. Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400.

https://drafts.csswg.org/css-fonts/#font-weight-prop

Относительные значения bolder и lighter

Свойство unicode-range

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

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

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

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

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

@font-face {
    font-display: swap;
    font-family: "Lato";
    src: url("/fonts/lato-light.cyrillic.woff2") format("woff2");
    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/georgia.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "drevodel";
    src: url("fonts/drevodel.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    unicode-range: U+30-39;
}

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

ascent-override, descent-override и line-gap-override

Обязательно проверяйте поддержку этих свойств на caniuse.com

Дескрипторы ascent-override и descent-override определяют высоту над базовой линией шрифта и под ней соответственно.

Пример написания:

@font-face {
    font-family: 'FontName';
    src: url("font.woff2")format("woff2");
    ascent-override: 90%;
}

See the pen (@Websitio) on CodePen.

При обычном подключении видно, что есть расстояние между буквами и ограничительной рамкой.

В первом примере шрифт поднят с помощью дескриптора ascent-override так, чтобы он касался верхней границы.

Во втором, аналогично, опущен до нижней границы с помощью descent-override.

Дескриптор line-gap-override переопределяет межстрочный промежуток для шрифта.

По умолчанию этот промежуток равен нулю (розовая граница). У голубого элемента значение переопределено на 50%, что создало дополнительное пространство сверху и снизу букв.

See the pen (@Websitio) on CodePen.

Конечно, напрашивается идея объединить три дескриптора и убрать все промежутки.

See the pen (@Websitio) on CodePen.

Связанные статьи

• Предзагрузка шрифтов