Загрузка шрифтов на сайте: как подключить локальные файлы и настроить font-display

Чтобы подключить локальные шрифты на сайт, разместите разрешённые к использованию файлы на сервере, опишите каждое начертание в CSS через @font-face и задайте подходящий font-display. Затем настройте резервный стек, при необходимости добавьте preload для критичного файла и проверьте отображение текста, пути и сетевые запросы в браузере.

Что проверить перед подключением локальных шрифтов

• Лицензия разрешает использовать файлы на сайте и хранить их на вашем сервере.
• Для каждого начертания известны имя семейства, толщина, стиль и формат файла.
• Пути в CSS соответствуют реальному расположению файлов и учитывают регистр символов.
• Резервный шрифт выбран с учётом ширины знаков и особенностей кириллицы.
• Preload запрашивает только действительно критичные файлы, используемые на первом экране.

Подготовьте файлы шрифтов и проверьте лицензии

Локальное подключение подходит, если вы контролируете файлы и хотите сократить зависимость сайта от внешних сервисов. Перед публикацией проверьте лицензию: наличие файла у вас не означает автоматического разрешения размещать его в интернете.

Не стоит подключать все варианты начертаний "на будущее": лишние файлы увеличивают объём загрузки. Если нужного веб-формата нет, получите его из легального исходника с помощью подходящего инструмента преобразования, не меняя лицензионные условия.

• Предпочтительно использовать WOFF2, если файл корректно поддерживает целевые браузеры.
• Уточните, содержит ли файл кириллицу и нужные символы.
• Не переименовывайте файлы так, чтобы потерять связь с начертанием и версией.

Опишите начертания в @font-face без конфликтов

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

Объявляйте каждое статическое начертание отдельно и указывайте точное соответствие между файлом и параметрами. Пример для обычного начертания:

@font-face {
  font-family: "Site Sans";
  src: url("/fonts/site-sans-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

Для жирного файла создайте отдельное правило с соответствующим путём и font-weight: 700. Если файл переменный, укажите поддерживаемый диапазон, например font-weight: 300 700, только когда он подтверждён характеристиками файла. Используйте единое имя font-family во всех правилах и не описывайте один файл как разные начертания без оснований.

Путь в url() рассчитывается относительно CSS-файла, если он относительный. Путь от корня сайта, начинающийся с /, помогает избежать ошибок при вложенных адресах страниц, но должен соответствовать структуре сервера.

Настройте font-display с учетом поведения при загрузке

font-display определяет, как браузер показывает текст, пока веб-шрифт загружается, и что делает после неудачной загрузки. Перед настройкой учитывайте следующие риски и ограничения:

• При неподходящем режиме текст может временно скрываться или отображаться системным шрифтом.
• Слишком поздний переход на локальный шрифт способен заметно изменить ширину строк и расположение элементов.
• Неверный путь или блокировка файла приведут к использованию резервного шрифта независимо от выбранного значения.
• Настройка одного режима для всех шрифтов не всегда подходит: декоративное начертание и основной текст могут требовать разного поведения.

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

• swap - быстро показывает резервный шрифт, затем заменяет его загруженным; возможен сдвиг текста.
• block - допускает период невидимого текста в ожидании веб-шрифта; не подходит, если важно сразу показывать содержимое.
• fallback - ограничивает период ожидания, после которого остаётся резервный шрифт, если загрузка затянулась.
• optional - позволяет браузеру решить, использовать ли веб-шрифт при текущих условиях загрузки.

1. Выберите шрифт и начертания. Определите, какие файлы нужны для основного текста и заголовков. Не подключайте начертания, которые не используются в стилях сайта.
2. Задайте начальное значение. Добавьте font-display в каждое правило @font-face. Для основного текста начните с swap, если приоритет - немедленная видимость.
3. Проверьте резервный шрифт. Убедитесь, что страница остаётся читаемой при отключённом файле или медленном соединении. Сравните ширину строк и переносы до и после загрузки.
4. Настройте режим для отдельных ролей. При необходимости примените другое значение к декоративному или менее важному начертанию. Изменяйте по одному параметру, чтобы видеть его влияние.
5. Повторите проверку в браузере. Откройте страницу с ограниченной скоростью сети и проверьте, когда появляется текст и не смещается ли важное содержимое. Исправьте ошибки загрузки до публикации изменений.

Соберите стек резервных шрифтов с близкими метриками

Резервный стек обеспечивает читаемость, если локальный файл ещё не загрузился или недоступен. Укажите несколько системных вариантов и общий класс:

body {
  font-family: "Site Sans", Arial, sans-serif;
}

Проверьте результат по этому списку:

• Кириллические буквы и знаки пунктуации отображаются ожидаемо.
• Резервный шрифт не вызывает нежелательных переносов в заголовках и кнопках.
• Текст остаётся читабельным при отключённой загрузке файла.
• После замены резервного шрифта локальным элементы не перекрывают друг друга.
• Для курсивного текста предусмотрено подходящее начертание или осознанный системный вариант.
• Толщина текста соответствует заявленным правилам font-weight.

Добавьте preload только для критичных начертаний

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

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

Перед публикацией исключите частые ошибки:

• Не добавляйте preload для каждого файла и каждого веса: это может конкурировать за ресурсы с другими важными запросами.
• Проверьте, что адрес в href совпадает с фактическим URL файла и с путём, используемым в CSS.
• Указывайте корректный тип файла в атрибуте type.
• Для шрифтов используйте атрибут crossorigin, в том числе когда файл размещён на том же домене.
• Не предварительно загружайте начертание, которое не используется на первом экране.
• После добавления preload убедитесь, что браузер не запрашивает один файл повторно из-за различия адресов или настроек запроса.

Проверьте отображение текста и сетевые запросы

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

Если локальная загрузка не подходит, рассмотрите один из вариантов:

• Системный стек. Подходит, когда важны простота и отсутствие дополнительных файлов; внешний вид зависит от устройства пользователя.
• Сервис шрифтов. Уместен, если условия лицензии или инфраструктура проекта предполагают загрузку через поставщика; проверьте требования к конфиденциальности и доступности сервиса.
• Локальный файл с резервным стеком. Подходит, когда нужен предсказуемый основной шрифт и контроль над загрузкой, а файлы и лицензия подготовлены.

Нюансы локальных шрифтов и их загрузки

Как подключить шрифты на сайт, если есть только файл TTF?

Сначала проверьте лицензию и возможность веб-использования. Если проекту нужен WOFF2, преобразуйте файл подходящим инструментом из легального исходника и проверьте, что итоговый файл содержит необходимые символы.

Как подключить локальные шрифты на сайт для нескольких начертаний?

Создайте отдельное правило @font-face для каждого статического начертания, задавая правильные font-weight и font-style. Для переменного файла укажите только подтверждённый диапазон значений.

Что означает font-display и что выбрать для основного текста?

font-display задаёт поведение текста во время загрузки веб-шрифта. Часто начинают со значения swap, чтобы текст сразу был видим, а затем проверяют возможный сдвиг при замене резервного шрифта.

Почему сайт не загружает локальный файл шрифта?

Проверьте адрес в url(), регистр символов в имени файла, доступность ресурса и ошибки в сетевых запросах браузера. Также убедитесь, что CSS-правило соответствует формату файла.

Нужно ли добавлять preload для каждого начертания?

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

Как проверить, что загрузка шрифтов на сайт работает правильно?

Проверьте сетевые запросы, отобразившуюся гарнитуру и страницу при медленном соединении или недоступном файле. Убедитесь, что текст остаётся видимым, а переход на локальный шрифт не нарушает макет.