Владимир Шайтан Senior Full Stack Developer в UKEESS Software House, Преподаватель Компьютерной школы Hillel.

Каждый раз, когда работаешь со шрифтами, начинаешь нервничать? Это нормально, тема шрифтов, их работы и подключение не совсем проста. Хотя, всегда можно подключить шрифт через Google Fonts и быть счастливым. Но, конечно, лучше понимать, как это работает, тогда и трудностей будет меньше, и на собеседовании не впадёшь в ступор. А может, и оптимизацию своих проектов проведёшь, ведь оптимизация — это всегда хорошо.

Персонально я люблю разбираться в теме глубоко, ведь когда знаешь, откуда ноги растут, тогда и баги фиксировать проще и почти всегда видишь, как лучше что-то имплементировать. Так что начнём.

ЧТО ТАКОЕ ШРИФТ?

Шрифт — это набор символов, имеющих общий дизайн, размер, стиль и вес. Он определяет, как выглядит текст на странице. Он является важным элементом стилизации, влияющим на читабельность, восприятие и общий дизайн веб-сайта или любого печатного материала.

Основные характеристики шрифтов:

Семейство (font-family): это общая группа шрифтов с похожим дизайном. К примеру, Arial, Roboto, Times New Roman.
Стиль (font-style): определяет наклон шрифта. Например, нормальный (normal), курсив (italic), или наклонный (oblique).
Вес (font-weight): отображает толщину символов. Это может быть 400 (обычный), 700 (жирный), или любое другое значение.
Размер (font-size): определяет высоту символов и обычно задаётся в пикселях (px), точках (pt), процентах (%) или em.
Высота строки: расстояние между базовыми линиями соседних строк текста.

Шрифты бывают двух основных типов:

С засечками (Serif): например, Times New Roman. У них маленькие линии или декоративные элементы на концах символов.
Без засечек (Sans-serif): например, Arial или Roboto. Они не имеют дополнительных линий, выглядят более современно и чисто.

А теперь погрузимся в работу браузера.

КАК ЗАГРУЖАЮТСЯ ШРИФТЫ В БРАУЗЕРЕ?

Прежде чем рассмотреть способы подключения, следует разобраться, как браузер загружает шрифты. Когда браузер открывает веб-страницу, он загружает HTML-документ и начинает обработку стилей (CSS). Когда он сталкивается с правилами подключения шрифтов (через <link>, @import или @font-face), браузер запрашивает сервер, чтобы получить файлы шрифтов. Этот процесс может задержать отображение текста на странице, особенно если подгружаются шрифты с внешних ресурсов.

Есть три основных состояния, через которые проходит текст при загрузке шрифтов:

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

Чтобы улучшить этот процесс, нужно знать разные способы подключения шрифтов.

СПОСОБ 1: ПОДКЛЮЧЕНИЕ ЧЕРЕЗ GOOGLE FONTS ИЛИ ДРУГИЕ СТОРОННЫЕ СЕРВИСЫ

1. Использование тега <link>

Один из самых популярных способов — подключение через Google Fonts. Всё, что нужно — добавить в HTML следующую строку:

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

2. Использование @import

Альтернативный способ — подключение через CSS:

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

Плюсы и минусы:

ПЛЮСЫ	МИНУСЫ
Лёгкое подключение	Долгое время загрузки через внешние ресурсы
Большая библиотека шрифтов	Зависимость от стороннего сервиса

Использование preload и preconnect

Чтобы улучшить скорость загрузки, добавьте следующие строки в <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" as="style" />

Это позволяет браузеру заранее установить соединение с сервером и скачать шрифты без задержек.

Как кэшируется Google Fonts?

Google Fonts использует CDN, что обеспечивает быструю загрузку и кэширование шрифтов. При первой загрузке браузер кэширует файлы, и они доступны даже при следующих визитах.

СПОСОБ 2: ЛОКАЛЬНОЕ ПОДКЛЮЧЕНИЕ ЧЕРЕЗ @font-face

Иногда ты получаешь файлы шрифтов от дизайнера или загружаешь их самостоятельно. В таком случае используется @font-face. Рекомендуется использовать несколько форматов для лучшей поддержки браузерами: .woff, .woff2, .ttf.

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

Что такое font-display?

swap: текст сразу отображается с резервным шрифтом и заменяется, когда основной загрузится.
block: текст будет невидим до загрузки шрифта.
fallback: текст отображается с резервным шрифтом и не меняется, если основной не успел загрузиться за определённое время.

Плюсы и минусы:

ПЛЮСЫ	МИНУСЫ
Полный контроль над шрифтами	Длительное начальное время настройки
Поддержка оффлайн-загрузки	Возможные проблемы с кэшированием

Оптимизация кэширования локальных шрифтов

Чтобы обеспечить кэширование локальных шрифтов, настрой HTTP-заголовки на сервере, например:

Cache-Control: public, max-age=31536000, immutable

Это позволит браузеру хранить файлы шрифтов в кэше в течение года.

СПОСОБ 3: ИСПОЛЬЗОВАНИЕ СИСТЕМНЫХ ШРИФТОВ

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

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Плюсы и минусы:

ПЛЮСЫ	МИНУСЫ
Мгновенное отображение текста	Ограниченный выбор стиля
Отсутствие задержек при загрузке	Не уникальный вид

ФОРМАТЫ ШРИФТОВ

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

Немного документации:

1. TrueType Fonts (.ttf)

Что это: один из самых старых форматов шрифтов, разработанный Apple и Microsoft. Он поддерживает высокое качество отображения на экране и в печатных материалах.
Поддержка браузерами: почти все современные браузеры поддерживают .ttf, но этот формат менее оптимизирован для веб-пользования.
Преимущества: прост в использовании, высокая совместимость.
Недостатки: большие файлы, отсутствие сжатия, что влияет на скорость загрузки.

2. OpenType Fonts (.otf)

Что это: улучшенный формат на основе TrueType, разработанный Adobe и Microsoft. Есть больше возможностей для типографии (дополнительные символы, лигатуры).
Поддержка браузерами: широко поддерживается, но .woff и .woff2 всё же лучше подходят для веб.
Преимущества: большая функциональность, гибкость в создании символов.
Недостатки: не сжимается для веб, что может влиять на скорость загрузки.

3. Web Open Font Format (.woff)

Что это: созданный специально для использования в интернете, включает сжатие и метаданные.
Поддержка браузерами: все современные браузеры (Chrome, Firefox, Safari, Edge) поддерживают .woff.
Преимущества: оптимизированный для веб, содержит метаданные.
Недостатки: в некоторых случаях чуть больше .woff2.

4. Web Open Font Format 2.0 (.woff2)

Что это: усовершенствованная версия .woff с лучшим сжатием и оптимизацией.
Поддержка браузерами: все современные браузеры поддерживают .woff2 и этот формат стал стандартом для вебшрифтов.
Преимущества: минимальный размер файла, лучшая оптимизация для веб.
Недостатки: не поддерживается в старых браузерах (например, в некоторых версиях Internet Explorer).

5. Embedded OpenType (.eot)

Что это: формат, созданный специально для Internet Explorer. Использовался для появления .woff и .woff2.
Поддержка браузерами: в основном поддерживается только в старых версиях Internet Explorer.
Преимущества: совместимость со старыми версиями IE.
Недостатки: не поддерживается современными браузерами, большой размер файла.

6. Scalable Vector Graphics Fonts (.svg)

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

Для разработки современных вебсайтов лучше всего подходят форматы .woff2 и .woff.

Почему .woff2 — лучший выбор?

Оптимизирован для веб: .woff2 обеспечивает лучшее сжатие, что уменьшает размер файла шрифта и ускоряет загрузку страницы.
Широкая поддержка обозревателями: этот формат поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge), что делает его универсальным для большинства пользователей.
Высокая производительность: поскольку .woff2 сжимает шрифты гораздо лучше, чем другие форматы, это уменьшает объём данных, которые браузер должен загрузить, что положительно влияет на скорость загрузки страницы.

Почему .woff тоже следует использовать?

Совместимость с более старыми браузерами: .woff хорошо поддерживается даже в более старых версиях браузеров, таких как Internet Explorer 9+. Это важно, если вы хотите обеспечить поддержку более широкой аудитории, которая может использовать устаревшее программное обеспечение.

Итак, лучший подход:

Основной формат: используй .woff2 для всех современных браузеров.
Резервный формат: добавь .woff для лучшей совместимости со старыми браузерами.

ПОДДЕРЖКА ФОРМАТОВ ШРИФТОВ В БРАУЗЕРАХ

БРАУЗЕР	.woff2	.woff	.ttf / .otf	.eot	.svg
Chrome	36+	5+	все версии	—	4-37 (до 37 версии)
Firefox	39+	3.6+	все версии	—	4-38 (до 38 версии)
Safari	10+	10+	все версии	—	3.1-9
Edge	14+	14+	все версии	—	—
Internet Explorer	—	9+	все версии	6-8	—
Opera	26+	11.1+	все версии	—	до 25 версии

Конвертация шрифтов

Если у тебя есть шрифты в форматах .ttf или .otf, и ты хочешь использовать их на своём сайте, лучше конвертировать их в .woff и .woff2 для оптимизации и лучшей поддержки современными браузерами.

Сервисы для конвертации шрифтов:

Transfonter (бесплатный онлайн-конвертер) позволяет конвертировать шрифты в форматы .woff и .woff2, настраивать подключение через @font-face и сжимать файлы.
FontSquirrel позволяет конвертировать шрифты в разные форматы с разными параметрами сжатия и опциями оптимизации.
OnlineFontConverter поддерживает разные форматы, позволяет конвертировать шрифты и загружать их на компьютер.

СОВЕТЫ ДЛЯ ОПТИМИЗАЦИИ

1. Всегда указывай несколько форматов шрифтов в правиле @font-face:

@font-face {
   font-family: 'CustomFont';
   src: url('/fonts/CustomFont.woff2') format('woff2'), /* сучасні браузери */
   url('/fonts/CustomFont.woff') format('woff');   /* старі браузери */
   font-weight: normal;
   font-style: normal;
}

2. Используй font-display: swap

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

@font-face {
   font-family: 'MyFont';
   src: url('/fonts/MyFont.woff2') format('woff2');
   font-display: swap;
}

3. Ограничивай количество шрифтов и жирность

Чем больше шрифтов и различных вариаций, тем больше времени уходит на загрузку. Старайся использовать максимум 2-3 разных шрифта и 2-3 вариации жирности (например, 400, 700).

4. Используй preconnect и preload для ускорения загрузки

Добавление preconnect и preload в <head> позволяет браузеру устанавливать соединение с сервером заранее и быстрее загружать шрифты.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="/fonts/MyFont.woff2" as="font" type="font/woff2" crossorigin>

5. Кэширование шрифтов

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

Cache-Control: public, max-age=31536000, immutable

Это позволит хранить шрифты в кэше браузера до года.

6. Сведи к минимуму использование @import

Использование @import для подключения шрифтов замедляет загрузку, поскольку браузер начинает обработку этого запроса только после загрузки CSS-файла. Вместо этого используйте тег <link> в <head> для подключения шрифтов.

7. Поддерживай только необходимые символы (Subsetting)

Если тебе нужна только часть символов (например, только латинские), воспользуйся сервисами, позволяющими удалить лишние символы из шрифта. Это уменьшит размер файла. Например, в Google Fonts можно выбирать только нужные наборы символов.

<link href="https://fonts.googleapis.com/css2?family=Roboto&subset=latin" rel="stylesheet"/>

8. Применяй резервные шрифты (Fallback fonts)

Обязательно добавляй резервные шрифты в font-family. Это гарантирует, что в случае если основной шрифт не загрузится, текст всё равно будет читабельным.

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

9. Используй локальные шрифты

Если ты подключаешь популярные шрифты, например Roboto или Open Sans, укажи сначала локальный вариант. Это поможет браузеру использовать уже установленный на пользовательском шрифте и избежать повторной загрузки.

@font-face {
   font-family: 'Roboto';
   src: local('Roboto'), url('/fonts/Roboto.woff2') format('woff2');
}

10. Отслеживай производительность шрифтов

Используй инструменты, такие как Google Lighthouse или WebPageTest, чтобы проверить, как шрифты влияют на скорость загрузки сайта. Это поможет определить узкие места и улучшить производительность.

ВЫВОД

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

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

Работа со шрифтами в вебе

Рекомендуем публикации по теме

Похожие материалы