Время чтения: Около 5 мин. Веб-разработка

Как подключить шрифты в проект: полное руководство для начинающих. Часть 2

Как подключить шрифты в проект: полное руководство для начинающих. Часть 2

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

В первой части мы разобрали, как выбрать шрифты, какие форматы существуют и на что обращать внимание при лицензировании. Теперь пришло время перейти к практике — подключению и оптимизации. Вы узнаете не только базовые методы, но и профессиональные приемы, которые используют опытные разработчики ↓

Ищем и подключаем шрифты с помощью Google Fonts

Google Fonts — это бесплатный сервис от Google, предоставляющий большую коллекцию веб-шрифтов. В нем вы найдете желаемый шрифт с помощью строки поиска. Далее нажимайте на большую синюю кнопку справа:

После этого у вас появится два способа (<link>/@import) для подключения шрифта, выберите подходящий, а также необходимые начертания:

* В зависимости от выбранных начертаний будет меняться наполнение ссылки для подключения шрифта.

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

Посмотрите внимательно на копию экрана выше. Для подключения шрифта через HTML вам нужно взять третью строку:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Этот метод рекомендуется использовать в большинстве случаев, так как он позволяет браузеру начать загрузку шрифта сразу после обнаружения тега link. В параметрах URL можно указать:

  • Необходимые начертания (wght@400;700)
  • Подмножества символов (subset=cyrillic)
  • Стратегию загрузки (display=swap).

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

Для подключения через стили выберите радиокнопку @import:

Вы можете использовать полностью этот код вписав его в HTML-страницу, либо применить его часть в отдельном CSS-файле:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

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

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

h1 {
  font-weight: 700;
}

Подключения шрифта с помощью правила @font-face

Правило @font-face позволяет подключить шрифт в css-файле напрямую с вашего сервера. Это дает полный контроль над файлами шрифтов и независимость от внешних сервисов. Базовый синтаксис:

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

В этом примере:

  • font-family задает имя, по которому будет доступен шрифт
  • src указывает путь к файлам шрифта в разных форматах
  • font-weight и font-style определяют параметры начертания
  • font-display управляет стратегией отображения при загрузке.

Подключение различных начертаний

/* Подключаем жирное начертание */
@font-face {
  font-family: 'MyCoolFont';
  src: url('fonts/mycool-bold.woff2') format('woff2');
  font-weight: 700;
}
/* Подключаем курсивное начертание */
@font-face {
  font-family: 'MyCoolFont';
  src: url('fonts/mycool-italic.woff2') format('woff2');
  font-style: italic;
}

Каскадная совместимость

Для максимальной совместимости можно использовать каскадное подключение форматов в @font-face:

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2'),
    url('font.woff') format('woff'),
    url('font.ttf') format('truetype');
}

Такой подход обеспечивает оптимальную производительность для современных браузеров с сохранением совместимости со старыми версиями.

Использование локальных шрифтов

Как подключить локальный шрифт css с устройства пользователя? Можно использовать функцию local() в @font-face:

@font-face {
  font-family: 'LocalSystem';
  src: local('Arial'), local('Helvetica');
}

Этот метод позволяет:

  • Использовать шрифты, установленные на компьютере пользователя
  • Экономить трафик при наличии нужного шрифта
  • Обеспечивать fallback на системные шрифты.

Комбинированный подход

В реальных проектах часто используется комбинация различных методов:

@font-face {
  font-family: 'CustomFont';
  src: local('CustomFont'),
    url('fonts/custom.woff2') format('woff2'),
    url('fonts/custom.woff') format('woff');
  font-display: swap;
}

Такой подход обеспечивает:

  • Попытку использования локального шрифта
  • Загрузку WOFF2 для современных браузеров
  • Fallback на WOFF для старых браузеров.

Рекомендации по подключению

Выбирая метод подключения, можно руководствоваться такими соображениями:

  • Google Fonts — подходит для простых проектов и прототипов
  • @font-face — для проектов с уникальными шрифтами
  • Локальные шрифты — как дополнительный fallback.

Оптимизация шрифтов

Оптимизация шрифтов ускоряет загрузку сайта на 5-12%. Что можно сделать?

  • Использовать кэширование на стороне сервера для шрифтов
  • Сжать файлы шрифтов (например, gzip)
  • Рассмотреть возможность хостинга шрифтов на CDN для более быстрой доставки
  • Ограничить количество используемых шрифтов на странице
  • Применять вариативные шрифты, если это возможно, для уменьшения количества файлов.

В практике программирования распространены три стратегии оптимизации загрузки шрифтов ↓

FOIT, FOUT и FOFT

  • FOIT (Flash of Invisible Text): текст невидим, пока шрифт не загрузится
  • FOUT (Flash of Unstyled Text): текст отображается системным шрифтом, пока загружается веб-шрифт
  • FOFT (Flash of Faux Text): промежуточный вариант между FOIT и FOUT, где используется системный шрифт, стилизованный под загружаемый.

Свойство font-display

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

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

Пример:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

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

Предзагрузка позволяет браузеру начать загрузку шрифта раньше, чем он обнаружит его использование в CSS. Это можно сделать с помощью тега <link> в HTML:

<link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin>

* Применяйте этот способ, если вам критически важно верное отображение шрифтов на первом экране страницы.

Уменьшение количества глифов шрифта

Многие шрифты содержат тысячи глифов, большинство из которых не так уж и нужны. Уменьшение количества глифов осуществляется с помощью инструментов, таких как glyphhanger или fonttools.

FontTools — это «швейцарский нож» для оптимизации шрифтов. Он требует ручной настройки, но дает максимальный контроль над размером и содержимым файлов. Для простых сценариев можно использовать glyphhanger.

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

  • Установите инструмент через консоль:
npm install -g glyphhange
  • С помощью параметра whitelist оставьте только нужные символы в проекте:
glyphhanger --whitelist=ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 --subset=myfont.ttf

Параметр subset определяет нужный вам шрифт.

Уточнение: glyphhanger работает с TTF, WOFF, WOFF2. Для WOFF2 добавьте флаг --formats=woff2.

Тестирование и отладка

После подключения шрифтов важно провести тщательное тестирование:

  1. Проверьте отображение шрифтов в различных браузерах и на разных устройствах
  2. Используйте инструменты разработчика в браузерах для анализа загрузки шрифтов
  3. Проведите A/B-тестирование для оценки влияния шрифтов на конверсию и вовлеченность пользователей
  4. Мониторьте время загрузки страницы и влияние шрифтов на общую производительность сайта.

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

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

Софья Пирогова

Главный редактор / Автор статей