Шрифт

В обиходе «шрифт» означает и семейство (гарнитуру), например Roboto, и отдельный файл с одним начертанием — обычным, жирным, курсивом. В CSS семейство задаётся свойством font-family, а начертание выбирается свойствами font-weight, font-style и font-stretch. Если нужного начертания нет, браузер синтезирует его сам — утолщает или наклоняет буквы, и выглядит это хуже настоящего.

Шрифт задаёт характер сайта и сильно влияет на читаемость, но это ещё и ресурс, который нужно скачать. Каждый файл — это запрос и десятки килобайт, а пока он грузится, текст либо невидим, либо показан запасным шрифтом и потом «перепрыгивает».

Пример подключения своего шрифта

@font-face {
  font-family: "Example Sans";
  src: url("/fonts/example-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0400-04FF;
}
body { font-family: "Example Sans", system-ui, sans-serif; }

<link rel="preload" href="/fonts/example-sans.woff2"
      as="font" type="font/woff2" crossorigin>

• WOFF2 — основной формат для веба, сжат лучше остальных и поддерживается всеми современными браузерами.
• Диапазон font-weight — признак вариативного шрифта: один файл содержит все насыщенности от 400 до 700.
• font-display: swap сразу показывает текст запасным шрифтом и подменяет его, когда файл загрузится.
• unicode-range говорит браузеру, для каких символов нужен этот файл: латиница и кириллица.
• Предзагрузка через preload ускоряет загрузку важного шрифта; атрибут crossorigin нужен даже для файлов со своего домена.

Как не замедлить сайт шрифтами

Чаще всего проблема не в одном шрифте, а в их количестве: три семейства по четыре начертания — это двенадцать файлов. Обычно хватает одного-двух семейств и трёх-четырёх начертаний. Стоит проверить, что в файле есть кириллица, иначе русские буквы отобразятся системным шрифтом, и что шрифт размещён на своём сервере, а не подтягивается со стороннего сервиса. Резкую подмену запасного шрифта на основной смягчают подбором похожего системного шрифта и дескриптором size-adjust; без этого возможна вспышка неоформленного содержимого и сдвиг строк. Отдельный случай — иконочные шрифты: сейчас вместо них чаще используют SVG. Если шрифты заметно тормозят загрузку, это одна из первых задач при ускорении сайта.

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