Специфика подключения шрифтов

Специфика подключения шрифтов

Автор: Верещагин Владислав

Какие есть шрифты?

Браузерные шрифты (Web-safe fonts)

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

  • Arial
  • Times New Roman
  • Verdana
  • Courier New
  • Georgia

Браузерные шрифты

Пользовательские шрифты (User-installed fonts)

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

Пользовательские шрифты

Авторские шрифты (Custom fonts / Web fonts)

Авторские или подключаемые веб-шрифты загружаются с удалённого сервера и могут использоваться независимо от того, установлены ли они у пользователя. Самый популярный способ подключения веб-шрифтов — использование сервиса Google Fonts или @font-face в CSS. Это обеспечивает согласованность стиля на всех устройствах, так как шрифт загружается с внешнего источника.

  • Подключение в <head> HTML:

Подключение в HTML

  • Применение в CSS:

Применение в CSS

  • Пример использования (с помощью @font-face):

Пример использования

Инлайн-шрифты (Inline fonts)

Инлайн-шрифты встраиваются прямо в CSS или HTML через использование data: URI. Этот метод позволяет загружать шрифт напрямую в HTML-документ или CSS без необходимости внешнего запроса, но может сильно увеличить размер файла. Пример использования:

Инлайн-шрифты

Итог

  • Браузерные шрифты — самые надёжные, но ограничены стандартными вариантами.
  • Пользовательские шрифты — зависят от наличия шрифтов у пользователя.
  • Авторские шрифты — гибкие и часто используются благодаря сервисам типа Google Fonts или с помощью @font-face.
  • Инлайн-шрифты — редкий метод, но может быть полезен для сокращения запросов к серверу.

Форматы шрифтов

  • TrueType (TTF) – формат шрифта полезный для расширения поддержки старых браузеров, особенно мобильных при необходимости.
  • Web Open Font Format (WOFF) - формат-обертка для шрифтов True Type и Open Type. Формат сжимает файлы шрифтов и поддерживается во всех современных браузерах.
  • Web Open Font Format 2 (WOFF2) - обновление для оригинального формата WOFF. Обеспечивает меньший размер файлов и лучшую производительность в современных браузерах.
  • Embedded OpenType (EOT) – формат шрифта полезный для рендера шрифтов в старых версиях IE. Если вам не нужно поддерживать IE8 и ниже, то лучше отказаться от этого формата.
  • Scalable Vector Graphics (SVG) - формат векторного воссоздания шрифта. Это единственный подходящий формат для мобильных версий браузера Safari версии 4.1 и ниже. Шрифты SVG в настоящее время не поддерживаются другими браузерами.

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

Какой формат включать?

В более современных браузерах можно использовать @font-face, используя форматы шрифтов WOFF и WOFF2. Эти форматы обеспечивают хорошее сжатие и позволяют работать с меньшим количеством файлов. Если же под устаревшие версии браузеров, можно включить файлы EOT и TTF. Так же для расширения браузерной поддержки могут пригодиться шрифты SVG формата.

Способы добавления шрифтов на страницу

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

  1. Подключить шрифт с внешнего ресурса в HTML документе, использовав для тега link. Например, подключение шрифта Spectral через сервис Google Fonts.

    Подключение через Google Fonts

  2. Создать ссылку для подключения шрифтов мы также можем внутри CSS файла, используя правило @import.

    Правило @import

  3. Используя директиву @font-face, можно разместить шрифты в локальной папке проекта, что позволяет более гибко контролировать формат шрифтов. Правило @font-face должно быть подключено в файле стилей до основных стилей.

    Директива @font-face

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

Сокращенные стили

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

Чтобы всё работало, мы должны указать свойство font-family для всего документа (body) или для конкретного тега.

Применение font-family

Особенности загрузки шрифтов

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

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

Свойство font-display

Значения

  • auto (по умолчанию): позволяет браузеру использовать значение умолчанию, который для каждого браузера свое. Чаще всего выполняется как значение block.
  • block: браузер скрывает страницы, пока пользовательский шрифт не загрузится полностью.
  • swap: браузер использует резервный шрифт для отображения текста до тех пор, пока пользовательский шрифт не будет полностью загружен. Смена шрифта резервного шрифта на пользовательский происходит в формате вспышки.
  • fallback: значение представляет собой баланс между auto и swap. Браузер временно скроет текст примерно на 100 миллисекунд, и, если шрифт еще не получен, он будет использовать резервный текст. Как только шрифт будет загружен, он перейдет к новому шрифту, растянув переход по времени.
  • optional: указывает браузеру сначала скрыть текст, а затем перейти к резервному шрифту, пока пользовательский шрифт не станет доступен для использования. Однако это значение предоставляет браузеру решать, использовать загружаемые шрифты или нет. В качестве определяющего фактора используется параметр скорости соединения пользователя. И пользователи с более медленным соединением с меньшей вероятностью получат загружаемые шрифты.

Полезные ресурсы

  1. Transfonter – Конвертация шрифтов в любой формат.
  2. CSS Tricks – Лучшие практики и интересные конструкции.
  3. Google Fonts – Обзор шрифтов.
Верещагин Владислав

Верещагин Владислав