Как найти неиспользуемые начертания шрифта на сайте

Чтобы найти неиспользуемые начертания шрифта на сайте, сопоставьте объявленные в CSS значения font-weight и font-style с реально применяемыми стилями и загруженными файлами WOFF или WOFF2. Начните с поиска правил @font-face, затем проверьте элементы в DevTools, сетевые запросы и сборку проекта. Такой аудит показывает, какие веса можно удалить без изменения дизайна.

Актуальность материала: 22 июля 2026 года. Под начертанием в статье понимается конкретная комбинация семейства, насыщенности и стиля: например, Regular 400, Medium 500, Bold 700 или Italic 400. В реальном проекте лишними бывают не только отдельные файлы, но и дублирующие подключения одного семейства из разных источников.

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

Избыток начертаний также увеличивает размер проекта и количество решений, которые приходится поддерживать. Дизайнер может использовать только Regular и Semibold, а в CSS останутся Light, Medium, Bold, ExtraBold и несколько вариантов курсива. Такой набор создает ложное ощущение гибкости: команда обращается к нему случайно, а браузер получает больше вариантов, чем действительно требуется интерфейсу.

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

Составьте предварительный список используемых сочетаний. Например: основной текст — Inter 400, заголовки — Inter 700, кнопки — Inter 600, служебные подписи — Inter 500. Если в проекте применяются кириллица и латиница, учитывайте их как разные наборы символов, но не путайте языковой поднабор с отдельным начертанием.

Начните с поиска @font-face в исходниках и итоговой сборке. Для каждого объявления запишите font-family, font-weight, font-style, источник файла и параметр font-display. Важна именно связка свойств: файл с названием font-semibold.woff2 может быть объявлен как 600, 500 или даже 700, если настройки были скопированы с другого проекта.

Обратите внимание на диапазоны веса, например font-weight: 100 900. Такая запись обычно описывает переменный шрифт, а не девять гарантированно используемых файлов. В этом случае проверяйте возможности самого файла и CSS-сценарии отдельно: удаление переменного шрифта только потому, что в коде не перечислены веса 300 или 800, будет ошибкой.

После инвентаризации найдите все вхождения font-weight, font-style и font-family. Ищите не только значения в компонентах, но и переменные, миксины, utility-классы и настройки дизайн-системы. Если вес назначается через переменную вроде --font-weight-heading, раскройте ее значение и проверьте, где переменная реально используется.

Пример: в проекте подключены веса 400, 500, 600 и 700, но поиск по стилям показывает только 400 для текста, 600 для заголовков и 700 для редкого акцентного блока. Вес 500 может быть неиспользуемым, однако перед удалением проверьте состояния компонентов, страницы ошибок, модальные окна, письма и административную часть, если они входят в ту же сборку.

Откройте сайт в браузере, выберите текстовый элемент и перейдите к рассчитанным стилям. Панель Computed покажет фактические font-family, font-weight и font-style после применения каскада. Проверьте несколько типов элементов: обычный абзац, заголовок, ссылку, кнопку, поле формы, подпись, таблицу и состояние с ошибкой.

DevTools помогает обнаружить расхождение между написанным CSS и визуальным результатом. Например, правило font-weight: 600 может отображаться начертанием 700, если файл 600 не подключен и браузер подбирает ближайший доступный вариант. В таком случае нельзя считать вес 600 доказанно используемым: сначала выясните, какой файл действительно отвечает за отрисовку.

Перезагрузите страницу с открытой вкладкой Network и отфильтруйте запросы по font, woff, woff2, otf или ttf. Так вы увидите, какие файлы запрашиваются в конкретном сценарии. Повторите проверку на главной странице, внутреннем материале, странице каталога, в мобильном представлении и после открытия интерактивных блоков.

Сетевой журнал показывает фактическую загрузку, но не полный список возможных начертаний. Файл может загружаться только после появления меню, формы или другого динамического компонента. Поэтому отсутствие запроса при первой загрузке не означает, что начертание можно удалить из проекта.

Составьте небольшой маршрут проверки и пройдите его вручную. Включите страницы с разным контентом, авторизованный и неавторизованный режимы, открытые выпадающие списки, подсказки, уведомления, кнопки в состояниях hover и disabled, а также длинные заголовки. Неиспользуемое начертание определяется только после проверки всех мест, где оно потенциально может появиться.

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

Разделяйте неиспользуемый вес и неиспользуемый стиль. Regular Italic и Regular Normal могут иметь одинаковое числовое значение 400, но решают разные задачи. Если в интерфейсе есть курсивные цитаты, юридические оговорки или выделения, удаление italic изменит отображение текста даже при полном отсутствии отдельного числового веса.

Представим сайт, где подключены Roboto 300, 400, 500, 700 и 900, а также варианты italic для 400 и 700. В стилях заголовки используют 700, основной текст — 400, подписи — 500, а курсив применяется только к цитатам. В таком сценарии веса 300 и 900, а также italic 700 становятся первыми кандидатами на удаление.

Однако перед изменением нужно проверить редактор контента и компоненты, которые могут получать класс из данных CMS. Если редактор позволяет автору выбрать «тонкий» или «жирный» текст, значение 300 или 900 может появиться без явного упоминания в основном CSS. Тогда решение зависит от продукта: ограничить доступные варианты или сохранить соответствующие файлы.

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

Variable font объединяет диапазон начертаний в одном файле и управляется осями, например weight или slant. Это не означает, что весь диапазон обязательно нужен странице. Проверьте CSS-свойства font-variation-settings, диапазоны font-weight и ограничения дизайн-системы. Удалять отдельный «вес» из variable font нельзя так же, как отдельный статический файл; обычно оптимизируют сам ресурс или диапазон его применения.

Самая распространенная ошибка — проверять только одну страницу. Главная может использовать Regular и Bold, тогда как карточки товаров, личный кабинет или форма заказа подключают Medium. Другая ошибка — ориентироваться на визуальное сходство: браузер способен синтезировать жирность или наклон, поэтому текст выглядит приемлемо даже при отсутствии нужного файла.

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

Нет, одного CSS недостаточно. Часть стилей может приходить из компонентов, CMS, JavaScript или внешних виджетов, а браузер может подменять отсутствующий вес синтетическим начертанием. Надежная проверка объединяет анализ кода, рассчитанных стилей, сетевых запросов и всех поддерживаемых сценариев сайта.

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

Если TTF и OTF не используются ни браузером, ни инструментами проекта, их можно исключить из веб-сборки. Но проверьте резервные форматы в src, скрипты конвертации, мобильные приложения и макеты. Исходный файл может быть нужен для генерации новых веб-форматов, поэтому удалять его из репозитория без проверки процесса не следует.

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

Лишний вес — это ненужная насыщенность внутри используемого семейства, например 500 при наличии только 400 и 700 в дизайне. Лишнее семейство — полностью отдельный шрифт, который может применяться в одной старой странице, виджете или системном компоненте. Для семейства нужно проверить не только font-family, но и порядок fallback-шрифтов.

Можно, если файл нужен для согласованного дизайн-набора или ближайшей функции, но решение должно быть осознанным. Для production-сборки обычно лучше включать только используемые ресурсы, а полный набор хранить отдельно в исходниках или библиотеке бренда. Так будущая готовность не превращается в постоянную нагрузку на каждую страницу.

Поиск неиспользуемых начертаний начинается с инвентаризации @font-face и заканчивается проверкой реальных страниц, состояний и production-сборки. Сопоставляйте CSS, DevTools и Network, учитывайте CMS и variable font, а удаление выполняйте небольшими шагами с обязательной визуальной проверкой.

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