Шрифт на сайте отвечает сразу за две вещи: как текст читается и как быстро появляется. Про первое думают дизайнеры, про второе обычно никто, и в итоге страница полсекунды показывает пустое место там, где должен быть заголовок.
Мы в студии Сайты2.рф подключаем шрифты на каждом проекте и разбираем чужие сайты, где именно шрифты оказались причиной плохих показателей скорости. Ниже - как выбирать, как подключать и что с лицензиями.
Сколько гарнитур брать
Правило простое: одна или две. Заголовки одной гарнитурой, основной текст другой. Больше двух семейств на сайте почти всегда выглядит случайным набором, а весит заметно.
На нашем сайте так и сделано: Onest для заголовков, Open Sans для текста. Внутри каждой берём только нужные начертания, а не всё семейство: обычное, полужирное и, если нужно, средней насыщенности.
Вес имеет значение: одно начертание в современном формате woff2 весит для кириллицы примерно 20-40 килобайт. Шесть лишних начертаний - это 150-200 килобайт, которые грузятся в момент, критичный для отображения текста.
Где брать шрифты
Свободные библиотеки. Основной источник для коммерческих проектов: шрифты с открытыми лицензиями, у большинства из них веб-использование разрешено. Для русского языка важно проверять наличие кириллицы: не у всех популярных латинских гарнитур она есть, а если есть, то иногда нарисована формально.
Российские бесплатные гарнитуры. За последние годы появились семейства, специально сделанные с хорошей кириллицей. Это удобно: не нужно проверять, как выглядит буква "ж" и не рассыпается ли "щ".
Платные шрифты. Покупаются у студий-разработчиков. Для веба нужна отдельная веб-лицензия, часто с ограничением по числу просмотров в месяц. Стоимость от нескольких тысяч рублей за начертание.
Системные шрифты. Вариант, о котором забывают. Стек из системных гарнитур весит ноль байт и появляется мгновенно. Для сервисов и админок это отличное решение, для сайта с фирменным стилем обычно не подходит.
Как правильно подключать
Порядок, к которому мы пришли на своих проектах.
Первое: скачиваем файлы и раздаём со своего домена. Это снимает вопросы с доступностью иностранных серверов и с передачей IP-адресов посетителей за границу.
Второе: используем только формат woff2. Он поддерживается всеми актуальными браузерами и весит меньше остальных. Старые форматы вроде eot и ttf для веба не нужны.
Третье: описываем шрифт в CSS с указанием диапазона символов и поведения при загрузке:
@font-face {
font-family: 'Onest';
src: url('/fonts/onest-600.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}Диапазон unicode-range позволяет разделить кириллицу и латиницу на отдельные файлы: браузер скачает только то, что реально нужно странице.
Четвёртое: для шрифта, которым набран текст на первом экране, добавляем предзагрузку:
<link rel="preload" href="/fonts/onest-600.woff2" as="font" type="font/woff2" crossorigin>Предзагружать надо один-два файла, не больше. Если предзагрузить всё, браузер начнёт конкурировать сам с собой за канал, и эффект будет обратным.
Что делать со скачком текста
font-display: swap показывает текст сразу системным шрифтом, а потом подменяет его на ваш. Это лучше, чем пустое место, но заметно: строки прыгают, а если сдвигается верстка, портится показатель стабильности макета.
Уменьшить скачок можно двумя приёмами. Первый: подобрать запасной системный шрифт с похожими пропорциями и указать его следующим в списке font-family. Второй: настроить метрики запасного шрифта через свойства вида size-adjust, ascent-override в отдельном описании @font-face. Тогда системный текст занимает почти столько же места, что и ваш, и подмена происходит без сдвигов.
Что именно портит показатель стабильности макета и как его измерять, разбирали в статье про Core Web Vitals.
Ленивое подключение без вреда
Распространённая техника: подключить стили шрифта как печатные, а после загрузки переключить на экранные. Так шрифт не блокирует отображение страницы. У нас на статике это сделано именно так, с запасным вариантом для случая, когда скрипты отключены.
Приём рабочий, но с одной оговоркой: если шрифтом набран заголовок первого экрана, отложенная загрузка добавит заметное мигание. В таком случае лучше предзагрузка, а не отсрочка.
Общий порядок работы со скоростью, включая шрифты, собран в статье про ускорение сайта.
Читаемость: цифры, которые работают
Размеры и интервалы, от которых мы отталкиваемся:
- Основной текст: 16-18 пикселей на мобильном, 17-19 на десктопе. Меньше 16 на телефоне не стоит.
- Межстрочный интервал: 1,5 для текста, 1,15-1,25 для заголовков.
- Длина строки: 60-80 символов. Слишком широкая строка утомляет, слишком узкая рвёт фразы.
- Контраст: для обычного текста отношение не ниже 4,5 к 1. Светло-серый текст на белом фоне выглядит стильно и читается плохо.
- Начертания: для основного текста обычное и полужирное. Тонкие начертания на экранах с невысокой плотностью пикселей выглядят рвано.
Отдельно про заглавные буквы: заголовок, набранный целиком капсом, читается медленнее. В русском языке это особенно заметно, потому что теряются надстрочные признаки букв.
Лицензии: что проверить
Три вопроса перед использованием шрифта в коммерческом проекте.
- Разрешено ли веб-использование. У платных гарнитур настольная лицензия не покрывает сайт, нужна отдельная.
- Есть ли ограничения по объёму. Некоторые веб-лицензии ограничивают число просмотров страниц в месяц или число сайтов.
- Кто владелец лицензии. Если шрифт купил подрядчик на себя, при расставании вы остаётесь без прав на его использование. Лицензии должны быть оформлены на заказчика, как и всё остальное. Мы разбирали это в статье про права на сайт.
Претензии по шрифтам встречаются реже, чем по фотографиям, но встречаются, и обычно с готовым расчётом суммы. Проверить происхождение шрифтов на сайте стоит один раз, тем более что это полчаса работы: посмотреть, какие файлы лежат в папке шрифтов, и найти их лицензии.
Частые ошибки
Шесть начертаний вместо трёх. Дизайнер использовал в макете тонкое, светлое, обычное, среднее, полужирное и жирное, и всё это подключили. Половина на сайте не встречается ни разу.
Подключение с чужого сервера. Работает, пока работает. Плюс вопрос с передачей данных посетителей за границу.
Отсутствие запасного шрифта. В списке font-family только ваша гарнитура. Если файл не загрузился, браузер подставит что попало.
Шрифт без кириллицы. Обнаруживается на этапе наполнения: часть заголовков внезапно набрана другим шрифтом.
Иконочные шрифты вместо SVG. Устаревший подход: тянет лишний файл и ломает доступность. Иконки лучше делать в SVG.
Короткий чек-лист
- Одна-две гарнитуры, три начертания максимум.
- Файлы в формате woff2 лежат на своём сервере.
- Кириллица и латиница разделены через
unicode-range. font-display: swapи предзагрузка для шрифта первого экрана.- Запасной системный шрифт указан и по возможности подогнан по метрикам.
- Проверены лицензии, они оформлены на владельца сайта.
- После внедрения измерены показатели скорости и стабильности макета.
Если хотите, чтобы мы проверили шрифты на вашем сайте: что подключено, откуда грузится, сколько весит и не блокирует ли отображение, напишите через контакты. Обычно на такой проверке находится 100-300 килобайт лишнего веса на первом экране.
