Оптимизатор размера доставки веб-шрифтов

• Мгновенный анализ доставки веб-шрифтов: анализируйте объявления CSS @font-face сразу в браузере — без загрузки на сервер и облачной обработки. Наш оптимизатор в реальном времени находит отсутствие WOFF2, устаревшие форматы и проблемы font-display.
• Безопасный онлайн-оптимизатор доставки веб-шрифтов: ваш исходный CSS не покидает устройство при анализе. Обработка на 100 % на стороне клиента означает полную приватность — без облачного хранилища, серверных логов и раскрытия URL шрифтов.
• Оптимизатор доставки веб-шрифтов — без установки: анализируйте и оптимизируйте объявления @font-face прямо в браузере без загрузок ПО, плагинов и аккаунта. Работает в любом современном браузере на любой ОС.
• Оптимизированный CSS в один клик: оптимизатор создаёт очищенный блок CSS @font-face — форматы EOT и SVG удалены, font-display добавлен, резервные local() добавлены — готовый к копированию или скачиванию в файл .css.

• Оптимизация шрифтов для Core Web Vitals: анализируйте объявления @font-face, чтобы исправить проблемы LCP и CLS, связанные со шрифтами. Отсутствие font-display: swap даёт невидимый текст (FOIT), задерживающий LCP; оптимизатор находит и исправляет это автоматически.
• Модернизация устаревших шрифтовых стеков: обновляйте старые @font-face-стеки с форматами EOT, SVG и TTF. Оптимизатор убирает устаревшие форматы, ставит WOFF2 первым в списке src и создаёт чистый современный CSS.
• Аудит шрифтов в дизайн-системе: проверяйте объявления @font-face в дизайн-системе или библиотеке компонентов. Оптимизатор находит отсутствие WOFF2, несогласованные значения font-display и возможности перейти на переменные шрифты.
• Самостоятельный хостинг шрифтов с соблюдением GDPR: находите URL CDN Google Fonts в объявлениях @font-face, которые могут нарушать GDPR, передавая IP пользователей в Google. Оптимизатор отмечает их и рекомендует самохостинг.
• Многоязычная доставка шрифтов: анализируйте объявления unicode-range для многоязычных стеков. Оптимизатор находит отсутствующие свойства unicode-range, из-за которых загружаются все подмножества шрифта даже на одноязычных страницах.
• Планирование перехода на переменные шрифты: выявляйте семейства с 4 и более объявлениями начертаний, которым подойдёт переменный шрифт. Оптимизатор отмечает их и рекомендует этот подход для сокращения HTTP-запросов.

Оптимизация доставки веб-шрифтов — это настройка объявлений CSS @font-face так, чтобы минимизировать размер загрузки шрифтов, сократить HTTP-запросы и предотвратить блокировку отрисовки. Ключевые факторы: выбор формата (WOFF2 на 30–50 % меньше WOFF), font-display (предотвращает невидимый текст во время загрузки), unicode-range (позволяет подмножества по письменности) и резервный local() (использует системные шрифты, когда доступны). Наш оптимизатор разбирает ваш CSS @font-face, находит все эти проблемы и создаёт оптимизированный CSS.

1. 1 Вставьте свой CSS @font-face: вставьте любой CSS с объявлениями @font-face — из вашей таблицы стилей, вставки Google Fonts или от провайдера шрифтов. Весь анализ идёт локально в браузере — CSS и URL шрифтов не покидают устройство.
2. 2 Нажмите «Анализировать доставку шрифтов»: оптимизатор разбирает каждый блок @font-face и извлекает font-family, font-weight, font-style, font-display, unicode-range и все записи src. Он находит отсутствие WOFF2, устаревшие форматы (EOT, SVG), отсутствие font-display и проблемы GDPR.
3. 3 Изучите рекомендации и скачайте оптимизированный CSS: результаты показывают метки форматов по каждому объявлению, рекомендации с исправлениями и очищенный CSS — EOT/SVG удалены, font-display добавлен, резервные local() добавлены — готовый к копированию или скачиванию.

• Формат WOFF2: WOFF2 использует сжатие Brotli и на 30–50 % меньше WOFF. Его поддерживают все современные браузеры (Chrome 36+, Firefox 39+, Safari 10+, Edge 14+). Всегда ставьте WOFF2 первым в списке src.
• Свойство font-display: управляет тем, как браузер обрабатывает загрузку шрифтов. swap сразу показывает резервный текст (лучше всего для основного текста); optional использует шрифт, только если он загрузится за 100 мс (лучше для некритичных шрифтов).
• Устаревшие форматы (EOT, SVG): EOT нужен только для IE8 и старше (менее 0,1 % рынка). SVG-шрифты устарели. Их удаление снижает сложность CSS и убирает лишние HTTP-запросы в старых браузерах.
• unicode-range: позволяет подмножества шрифтов по письменности — браузер загружает файл только для реально используемых на странице письменностей. Критично для многоязычных сайтов с большими CJK- или мультискриптовыми семействами.

Оптимизатор размера доставки веб-шрифтов анализирует только объявления CSS — он не скачивает и не измеряет реальные размеры файлов шрифтов. Оценки основаны на типичных значениях для каждого формата (WOFF2 ~18 КБ, WOFF ~28 КБ, TTF ~45 КБ для латинского подмножества). Реальные размеры зависят от числа глифов, функций OpenType и подмножества. Оптимизатор не может определить, действительно ли файлы WOFF2 доступны по указанным URL — проверьте их на вкладке «Сеть» в браузере.