Представьте: вы заходите на сайт, текст на мгновение появляется, потом исчезает, а через секунду «прыгает» и меняет свой вид. Знакомо? Это типичная проблема тяжелых шрифтов.
Многие начинающие разработчики просто скачивают понравившийся шрифт и подключают его «как есть». Но стандартный файл шрифта может весить 500 КБ и более. Если у вас 2–3 таких шрифта, страница становится «неповоротливой». Даже если вы используете оптимальный вариант WOFF2 на 2026 год.
Сегодня разберем, как сделать шрифты легкими, используя бесплатный инструмент Web Font Optimizer (site-alarm.com).
1. Зачем вообще оптимизировать шрифты?
Шрифт — это не просто картинка, это набор сотен (а иногда и тысяч) символов: буквы разных алфавитов, иероглифы, математические знаки и даже смайлики.
Большинство из них вам никогда не понадобятся. Зачем загружать пользователю китайские иероглифы, если ваш сайт только на русском и английском? Оптимизация помогает:
- Ускорить загрузку: Чем меньше весит файл, тем быстрее он «прилетит» в браузер.
- Улучшить SEO: Google любит быстрые сайты и ставит их выше в поиске.
- Экономить трафик: Особенно важно для пользователей с мобильным интернетом.
2. Что такое Subsetting (Подмножества)?
Это главная магия оптимизации. Subsetting — это процесс «вырезания» из шрифта только тех символов, которые вы реально используете.
Если вы выберете только «Кириллицу» и «Латиницу», размер файла может уменьшиться в 5–10 раз! Инструмент от Site-Alarm делает это буквально в пару кликов.
3. Выбираем правильный формат: WOFF2 — наш бро
В мире веба есть несколько форматов шрифтов: TTF, OTF, WOFF и WOFF2.
- TTF/OTF — это старые форматы для компьютеров. В вебе они слишком тяжелые.
- WOFF — сжатый формат специально для интернета.
- WOFF2 — «король» форматов. Он использует продвинутые алгоритмы сжатия и весит на 30% меньше обычного WOFF.
Совет: Всегда используйте WOFF2. Он поддерживается всеми современными браузерами.
4. Как пользоваться Web Font Optimizer (Пошагово)
Сервис от Site-Alarm максимально прост:
- Загрузите файл: Перетащите ваш шрифт (например, в формате .ttf) в окно загрузки.
- Выберите наборы символов: Отметьте
Cyrillic(для русского языка) иLatin(для английского). Если вам нужны только цифры для красивого счетчика, можно выбрать только их. - Конвертируйте: Нажмите кнопку оптимизации.
- Скачайте результат: Вы получите готовый файл
.woff2, который будет в разы легче оригинала.
5. Как правильно подключить?
В Elementor, Bricks или просто загрузите пользоветльские шрифты, что очень удобно, отключите Google fonts совсем и используйте только свои.
Для более продвинутого метода лучше использовать метод подключения в CSS
После оптимизации шрифт нужно правильно «прописать» в коде. Используйте правило @font-face с параметром font-display: swap. Это заставит браузер сначала показать системный шрифт, а как только ваш красивый шрифт загрузится — плавно заменить его.
CSS
@font-face {
font-family: 'MyCoolFont';
src: url('my-font-optimized.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap; /* Чтобы текст не исчезал при загрузке */
}
Итог
Оптимизация шрифтов — это один из самых простых способов ускорить ваш проект. Вместо того чтобы заставлять пользователя качать «лишние» мегабайты, потратьте 2 минуты на Subsetting. Ваш сайт станет быстрее, а пользователи — счастливее!
