Конвертер TTF в WOFF2

WOFF2 — веб-формат шрифта, рассчитанный на передачу по сети. Если у вас есть локальный TTF и право использовать его на сайте, конвертация может уменьшить загрузку шрифтового файла. Вставьте полученный адрес в @font-face, укажите format("woff2") и проверьте отображение на нужных устройствах. Размер исходного TTF и результата показан после преобразования, чтобы можно было оценить фактическую экономию.

Перед конвертацией определите, какие начертания нужны интерфейсу. Отдельные файлы для веса 400, 500 и 700 могут оказаться тяжелее вариативного шрифта, если проект постоянно использует весь диапазон. С другой стороны, один небольшой файл часто быстрее нескольких тяжёлых семейств. Измеряйте реальную загрузку страницы, а не только размер одного файла.

Выберите локальный файл с расширением .ttf размером до 10 МБ. Браузер проверит TrueType-заголовок, загрузит конвертер только после нажатия кнопки и создаст WOFF2 без отправки шрифта на сервер. После завершения скачайте файл и поместите его в статические ресурсы проекта. Имя файла сохраняется, меняется только расширение.

Если конвертация не удалась, проверьте, что файл открывается в редакторе шрифтов и действительно имеет формат TrueType. Простое переименование OTF в TTF не меняет внутреннюю структуру. Для повреждённого или нестандартного шрифта лучше использовать исходный файл от поставщика, а не пытаться исправить байты вручную.

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

Снимите сетевой профиль на мобильной ширине и сравните момент появления текста. Для критического начертания может пригодиться preload, но лишние предварительные загрузки способны ухудшить производительность. Настройка font-display должна соответствовать поведению интерфейса при медленной сети. Если результат меняет метрики страницы, зафиксируйте это отдельным тестом, а не предположением.

Право на преобразование и веб-публикацию определяется лицензией конкретного шрифта. Наличие TTF-файла на компьютере само по себе не даёт разрешения размещать его в открытом интернете. Проверьте условия поставщика, число доменов, ограничения на модификацию и требования к указанию автора до загрузки результата на сайт.

Этот инструмент принимает только TTF и не подмножает глифы. В результате остаётся набор символов исходного файла. Он не проверяет, можно ли юридически использовать шрифт, и не выполняет визуальный контроль качества. Для крупного проекта с несколькими языками полезно наладить воспроизводимую сборку шрифтов, чтобы обновление исходника не меняло сайт неожиданно.

Поместите скачанный WOFF2 в папку статических ресурсов и объявите семейство через @font-face. Укажите существующий путь к файлу, font-family, font-style и конкретный font-weight, соответствующий выбранному TTF. Затем примените это семейство к нужному блоку. Если у вас несколько начертаний, для каждого создайте отдельное объявление с собственным URL и весом. Браузер выбирает файл по CSS-описанию, а не по имени в папке.

@font-face {
  font-family: "Site Sans";
  src: url("/fonts/site-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

Откройте вкладку Network в инструментах разработчика и убедитесь, что браузер действительно загрузил WOFF2 с кодом 200, а не перешёл на системный fallback. Проверьте MIME-тип font/woff2, заголовки кэша и политику CORS, если файл находится на другом домене. Путь в примере условный: подставьте свой адрес. Для Next.js статический файл из public/fonts обычно доступен по /fonts/имя. Если шрифты обслуживает CDN, не забудьте обновить его кэш после замены файла.

Используйте контрольную строку с заглавными и строчными русскими буквами, латинскими буквами, цифрами, символом рубля, кавычками и длинным тире. Сравните её до и после преобразования в одном браузере и при одинаковом размере шрифта. Отдельно посмотрите жирность, высоту строки и положение знаков препинания. Если буквы отличаются, сначала выясните, не подключился ли другой файл из-за неправильного font-weight или отсутствующего глифа.

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

Шрифт читается браузером после выбора файла; его содержимое не отправляется Pugofka. Виджет скрыт от записи содержимого Вебвизором, а события Метрики содержат только название инструмента и тип действия. После закрытия вкладки результат исчезнет, поэтому сохраните скачанный WOFF2 и исходный TTF в проекте.

Готовый файл создаётся как локальный Blob и скачивается браузером. Если шрифт является коммерческим ресурсом, не отправляйте его в сторонние онлайн-сервисы без проверки условий лицензии. Здесь обработка происходит на вашем устройстве.