🚀 Как сжать Font Awesome до 10 КБ и ускорить загрузку сайта
Иконки делают сайт понятным. Навигация, соцсети, кнопки действий, везде нужны маленькие графические подсказки, которые посетитель считывает мгновенно. Font Awesome закрывает эту задачу уже 14 лет: библиотека из более чем 2000 бесплатных иконок, которые подключаются одной строкой. Проблема в том, что строка тянет за собой сотни килобайт.
Полный пакет Font Awesome 7 Free весит около 150 КБ за стиль, только webfont-файлы, без CSS. Добавьте CSS (ещё ~100 КБ минифицированного кода), и каждая первая загрузка страницы отдаёт пользователю 250+ КБ. Хуже того: если вы используете 8-10 иконок из двух тысяч, браузер всё равно качает всё. На мобильном 4G это 2-3 лишние секунды ожидания. Google PageSpeed штрафует такие раздачи прямым снижением балла.
Но проблема решаема. Мы покажем, как вырезать из библиотеки только те иконки, которые реально используются на вашем сайте, и получить итоговый размер 10-15 КБ без потери функциональности. Разобраны все способы: от автоматических до ручных, от онлайн-инструментов до CLI-утилит. Никакой магии, только рабочие техники.
💡 Быстрый обзор:
- Проанализируйте сайт и составьте список реально используемых иконок Font Awesome
- Выберите метод оптимизации под свою ситуацию: онлайн-инструмент FontCut, CLI-утилита fa-subset или официальный механизм Kit-ов
- Для максимального контроля возьмите ручной путь через FontForge или IcoMoon: он требует усилий, но даёт полную власть над итоговым файлом
- Сгенерируйте урезанный webfont и CSS, замените ими полную версию на сервере
- Замерьте скорость до и после: типичный прирост PageSpeed Score составляет 20-40 баллов
Зачем вообще резать Font Awesome?
Главная причина, скорость загрузки. Google-исследование показывает: 53% мобильных посетителей покидают страницу, если она грузится дольше 3 секунд. Каждые лишние 100 КБ на критическом пути рендеринга увеличивают время до First Contentful Paint.
Font Awesome Free 7 содержит три стиля: Solid, Regular и Brands. Суммарно это более 2000 иконок и около 450 КБ сжатых webfont-файлов. Типичный лендинг или блог использует 10-20 иконок, менее 1% библиотеки. Всё остальное браузер загружает впустую.
Вторая причина, Core Web Vitals. Метрика LCP (Largest Contentful Paint) напрямую зависит от того, как быстро браузер получает и отрисовывает шрифты. Неподрезанный Font Awesome блокирует отрисовку текста, пока webfont не загрузится. После сабсеттинга файл становится настолько маленьким, что браузер получает его в рамках первого сетевого запроса.
Третья причина, мобильный трафик. Пользователи на лимитных тарифах не скажут вам спасибо за лишние 400 КБ на каждой странице. Сабсеттинг возвращает контроль над бюджетом загрузки.
Цифры из реальных кейсов: сокращение webfont-файла с 345 КБ до 14,5 КБ дало прирост Lighthouse Performance Score с 52 до 89 баллов на одном из проектов. Разница видна невооружённым глазом: страница становится интерактивной почти мгновенно.
Способ 1: официальный механизм Kit-ов (рекомендуемый)
Самый простой и поддерживаемый путь, использовать Font Awesome Kit со встроенным сабсеттингом. Метод работает с бесплатной учётной записью и не требует установки сторонних инструментов.
Как это работает
Kit, это персональный пакет Font Awesome, который вы настраиваете в личном кабинете на fontawesome.com. В настройках Kit-а есть раздел «Icon Selection» с двумя режимами:
- By Style, вы отмечаете галочками нужные стили (Solid, Regular, Brands), и Kit грузит только выбранные. Уже на этом шаге отсекается два из трёх стилей, если вам нужен только Solid.
- By Icon, вы указываете конкретные иконки поиском, и Kit формирует файл, содержащий только их. Именно этот режим даёт максимальное сжатие.
После сохранения настроек Kit автоматически пересобирает пакет. Вы получаете тег <script>, который вставляете в <head> сайта. Font Awesome CDN отдаёт уже подрезанную версию. Никаких локальных файлов, никакой ручной сборки.
Преимущества Kit-подхода
- Не нужно скачивать и хостить файлы: CDN Font Awesome раздаёт подрезанный пакет глобально
- При добавлении новой иконки вы просто обновляете список в настройках Kit-а, пересборка происходит автоматически
- Работает с Font Awesome Pro, включая Duotone и Sharp-стили
- Поддерживает SVG+JS и Webfonts+CSS-режимы
Когда Kit не подходит
Единственное ограничение: подрезанный Kit недоступен для скачивания на свой сервер на бесплатном тарифе. Если вам критично хостить шрифты локально (внутренняя сеть, политика безопасности), Kit, не вариант. Тогда смотрите способы 2 и 3.
Способ 2: онлайн-инструмент FontCut
Если вы не хотите регистрироваться в Font Awesome или предпочитаете готовый ZIP-файл, который можно положить в репозиторий, подойдёт FontCut.com. Бесплатный онлайн-генератор, заточенный специально под Font Awesome 6.4.0 и Bootstrap Icons.
Процесс состоит из трёх шагов:
- Выбираете набор иконок (Font Awesome Free 6.4.0, самая свежая доступная версия)
- Отмечаете галочками нужные иконки в визуальной сетке
- Скачиваете ZIP-архив с CSS и webfont-файлами, загружаете на свой сервер
Результат, автономный пакет из 10-15 КБ, который вы хостите сами. Инструмент не требует регистрации, а превью показывает итоговый размер в реальном времени.
Ограничение: FontCut использует FA 6.4.0, а не актуальную версию 7.2.0. Для большинства проектов разница незаметна: иконки solid-стиля между версиями не меняются. Но если вам нужны иконки, добавленные в FA 7 (Pro+ пакеты), FontCut их не предложит.
Способ 3: CLI-утилита fa-subset (для разработчиков)
Автоматическое определение используемых иконок, самый точный подход. Утилита fa-subset (Python, BSD-2-Clause, инструкция на Dev.to) сканирует исходный код проекта, находит все классы fa-* и генерирует подрезанный webfont, содержащий только реально используемые иконки.
Установка:
1 pip install fonttools
Базовый запуск (dry-run для анализа):
1 python3 bin/fa-subset.py \ 2 --src ./src ./templates \ 3 --ext .html .php .twig .js \ 4 --pack solid:css=./css/fontawesome.min.css,font=./fonts/fa-solid-900.ttf \ 5 --out ./optimised \ 6 --dry-run
Утилита выводит список найденных иконок и прогнозируемый размер подрезанного файла. Без флага --dry-run генерирует готовый CSS и webfont в папке ./optimised.
Сильные стороны fa-subset:
- Сканирует PHP, HTML, JS, Blade, Twig, Vue, React, любые текстовые файлы проекта
- Понимает дуотон-иконки (двойные codepoint-ы в Font Awesome 6+)
- Умеет давать JSON-отчёт для CI/CD-пайплайнов:
--report-json ./report.json --strict-styles - Работает с WordPress-темами, Laravel-шаблонами, React/Vue-компонентами
Реальный результат на production-сайте: сжатие с 803 КБ (fonts + CSS) до 14,5 КБ, сокращение на 98%. Утилита бесплатна и не привязана к сервисам Font Awesome.
Способ 4: IcoMoon (визуальный конструктор шрифтов)
IcoMoon, веб-приложение для создания кастомных иконочных шрифтов. Доступен по адресу icomoon.io/app. Подход чуть сложнее Kit-ов, но даёт одну уникальную возможность: смешивать иконки из разных библиотек в одном файле.
Шаг 1: выберите пакет Font Awesome
Заходите на icomoon.io/app, нажимаете «Add Icons From Library», находите Font Awesome в списке и жмёте «Add».
Шаг 2: отметьте нужные иконки
В окне выбора отметьте все иконки, которые используются на вашем сайте, кликом по каждой. Можно выбрать несколько библиотек одновременно, например, Font Awesome + Material Icons, и получить единый файл с иконками из обоих наборов.
Шаг 3: сгенерируйте и скачайте шрифт
После выбора нажмите кнопку «Generate Font» внизу страницы. IcoMoon покажет все отобранные иконки и даст кнопку «Download». ZIP-архив содержит webfont-файлы (woff, woff2, eot, svg, ttf), файл style.css и демонстрационный demo.html.
Сохраните файлы в репозиторий сайта и подключите style.css в <head>. Если что-то пошло не так, откройте demo.html из архива: там показано, как именно подключается и используется шрифт.
IcoMoon хорош, когда вам нужно смешать иконки из разных наборов или когда вы принципиально не хотите зависеть от CDN Font Awesome.
Способ 5: ручная резка через FontForge
Самый трудоёмкий, но и самый контролируемый метод. Подходит, если вы хотите понимать каждый байт итогового файла или работаете в среде без доступа к внешним сервисам.
Шаг 1: локализуйте шрифт
Скачайте Font Awesome с официального сайта. Удалите CDN-ссылку из <head>, если она была. Распакуйте архив в репозиторий сайта.
Подключите CSS локально:
1 <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
Очистите кеш браузера и перезагрузите сайт. Иконки должны отображаться как раньше, но теперь вы контролируете файлы на сервере.
Шаг 2: удалите лишние файлы
После распаковки архива Font Awesome вы увидите структуру папок:
Для работы нужны только CSS и webfont-файлы. Современным браузерам достаточно формата woff2: поэтому файлы ttf, eot и svg можно удалить.
Less- и SCSS-исходники удалите, если не планируете их компилировать. Оставьте только css/ и fonts/ с файлом fa-solid-900.woff2 (или аналогичным для вашей версии).
Шаг 3: отредактируйте webfont в FontForge
Скачайте и установите FontForge (бесплатный редактор шрифтов с открытым кодом). Откройте файл .woff2 через меню File → Open.
В интерфейсе FontForge найдите панель глифов. Чтобы не скроллить вручную, идите в Encoding → Compact: все занятые позиции подтянутся в начало.
Теперь самая ответственная часть: зажмите Shift и выделите все глифы, которые ваш сайт НЕ использует. Удалите их (Edit → Clear). Оставьте только иконки, реально встречающиеся в вёрстке: соцсети, стрелки, иконки меню, брендовые логотипы.
Сохраните результат: File → Generate Fonts. Выберите формат Web Open Font Format (woff2) и укажите имя файла. Замените исходный webfont в папке fonts/ на подрезанную версию.
Перезагрузите сайт и проверьте все иконки. Если какая-то исчезла, вы удалили нужный глиф, откройте FontForge снова и повторите отбор аккуратнее.
А может, просто сменить библиотеку?
Иногда лучшая оптимизация, не оптимизировать Font Awesome, а взять инструмент, который изначально легче. Современные альтернативы дают иконки в SVG-формате с tree-shaking на уровне импорта: в бандл попадают только те иконки, которые вы явно импортировали.
Три варианта, которые стоит рассмотреть:
Lucide Icons, 1460+ иконок, MIT-лицензия, прямой наследник Feather Icons. Иконки на 24px-сетке, стилистически близки к FA, но пакет весит считанные килобайты при tree-shaking. Для React/Vue/Svelte, родные компоненты с пропсами
size,colorиstrokeWidth.Phosphor Icons, 1400+ иконок в шести стилях (thin, light, regular, bold, fill, duotone). Каждая иконка импортируется индивидуально:
import { House } from '@phosphor-icons/react'. Никакого неиспользуемого балласта.Bootstrap Icons, 2000+ SVG-иконок, бесплатно, активно развиваются. Прямая совместимость с Bootstrap-экосистемой, но могут использоваться и отдельно. Отдельные SVG-файлы позволяют встраивать иконки инлайн без дополнительных запросов.
Если ваш сайт на WordPress, посмотрите наше руководство по добавлению Font Awesome в WordPress. А для тех, кто хочет копнуть глубже в тему веб-шрифтов, есть разбор загрузки веб-шрифтов без блокировки рендеринга.
⁉️🤔 Частые вопросы
Что такое сабсеттинг иконок и зачем он нужен?
Сабсеттинг, это процесс создания уменьшенной версии иконочного шрифта, содержащей только те иконки, которые реально используются на сайте. Полный пакет Font Awesome 7 Free весит около 450 КБ сжатыми webfont-файлами. Типичный сайт использует 10-20 иконок, после сабсеттинга файл сокращается до 10-15 КБ. Разница загрузки моментально отражается в PageSpeed Score: типовой прирост составляет 20-40 баллов.
Сколько иконок браузер загружает, если я подключил Font Awesome через CDN?
Все. CDN-ссылка на
all.min.cssтянет за собой полный набор из трёх стилей: Solid, Regular и Brands. Браузер загружает все webfont-файлы, даже если на странице использована одна иконка. Именно поэтому CDN-подход без Kit-а, самый затратный по байтам. Kit с настройкой «By Icon» решает эту проблему: CDN отдаёт только те иконки, которые вы явно выбрали в настройках.
Какой метод оптимизации выбрать для WordPress-сайта?
Если сайт на WordPress и вы не хотите возиться с CLI, используйте официальный Kit (способ 1). Настройка занимает 5 минут в личном кабинете fontawesome.com, результат доставляется через CDN. Если по политике безопасности нельзя использовать CDN, подойдёт FontCut (способ 2): скачали ZIP, загрузили через FTP, подключили в
header.php. Для разработчиков, которые хотят автоматизации, fa-subset (способ 3) умеет сканировать PHP-шаблоны темы и пересобирать шрифт при каждом деплое.
Безопасно ли удалять webfont-форматы ttf, eot и svg?
Да. Современные браузеры (Chrome, Firefox, Safari, Edge) поддерживают woff2 с 2016 года. По данным Can I Use, поддержка составляет 98%+ глобального браузерного рынка. Формат woff2 даёт лучшее сжатие (в среднем на 30% компактнее woff). Файлы eot (нужен был только для IE8), ttf и svg можно смело удалять из папки fonts. Оставьте только woff2, а если нужна поддержка старых Safari на iOS 12 и ниже, добавьте woff как fallback.
Стоит ли вообще использовать Font Awesome в 2026 году?
Зависит от проекта. Если у вас уже внедрён Font Awesome и используется 5-10 иконок, сабсеттинг (любой из способов выше) решит проблему веса за час. Если проект новый и вы выбираете библиотеку с нуля, присмотритесь к Lucide или Phosphor: они изначально построены вокруг tree-shaking и дают нулевой оверхед. Font Awesome остаётся лидером по количеству иконок в экосистеме и интеграциям, но его весовая цена без сабсеттинга выше, чем у современных SVG-альтернатив.
Стоит ли возиться с парой десятков килобайт?
Однозначно да. Каждый неоптимизированный килобайт на критическом пути рендеринга напрямую снижает конверсию. Amazon подсчитал, что 100 мс задержки загрузки стоят 1% продаж. Google штрафует медленные страницы в мобильной выдаче. Это не перфекционизм, а прямая экономика.
Выберите метод под свою ситуацию:
- Минимум усилий, Kit с настройкой By Icon. 5 минут, результат сразу в CDN.
- Локальный хостинг, без регистраций, FontCut. 10 минут, ZIP у вас на сервере.
- Автоматизация в CI/CD, fa-subset. Сканирует код, пересобирает при деплое.
- Полный контроль, FontForge или IcoMoon. Дольше, но вы знаете каждый глиф.
Сокращение с 450 КБ до 15 КБ меняет восприятие скорости кардинально. Попробуйте на одном проекте, замерьте PageSpeed до и после. Результат скажет сам за себя.
Профессиональная команда авторов и редакторов, специализирующихся на создании качественного контента.