Если вы размещаете шрифты TTF на своем сайте, вы отправляете примерно на 30% больше данных, чем необходимо. WOFF2 доставляет тот же шрифт в значительно меньшем файле, и каждый современный браузер его поддерживает. Вот как конвертировать — и почему это важно для производительности вашего сайта.
Почему WOFF2?
WOFF2 (Web Open Font Format 2.0) использует сжатие Brotli для уменьшения размера шрифтовых файлов на примерно 30% по сравнению с TTF, без потери качества. Глифы шрифта, подсказки, межбуквенная кернинг и все типографские особенности сохраняются идентично. Когда браузер загружает файл WOFF2, он распаковывает его до тех же данных, что и исходный TTF.
Влияние на производительность ощутимо. Шрифты являются ресурсами, блокирующими отрисовку — браузер не отобразит текст, пока шрифты не загрузятся полностью. 120КБ TTF, преобразованный в 84КБ WOFF2, означает, что текст появится быстрее, особенно на мобильных соединениях. Google Core Web Vitals напрямую измеряют это: меньшие шрифты улучшают Largest Contentful Paint (LCP) и снижают Cumulative Layout Shift (CLS) из-за замены шрифтов.
Поддержка браузеров универсальна. Chrome, Firefox, Safari и Edge поддерживают WOFF2. Единственные браузеры, которые не поддерживают, — это Internet Explorer и очень старые версии Android — оба ниже 1% глобального трафика.
Как конвертировать
Использование WOFF2 в CSS
После того как вы получите свой файл WOFF2, укажите его в вашем файле стилей. Укажите WOFF2 первым с резервным вариантом TTF для максимальной совместимости:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.ttf') format('truetype');
font-display: swap;
}Директива font-display: swap сообщает браузеру показывать текст-запасной сразу и заменять его пользовательским шрифтом после его загрузки, устраняя невидимый текст во время загрузки шрифта.
Соблюдение лицензии шрифтов
Многие коммерческие лицензии шрифтов включают условия, ограничивающие загрузку файлов шрифтов на сторонние веб-сервисы. Это создает проблему: вам нужно конвертировать в WOFF2 для производительности, но большинство инструментов конвертации требуют загрузки шрифта на сервер.
Конечно, всегда проверяйте условия лицензии вашего шрифта. Но локальная обработка в Morph устраняет наиболее распространенную проблему соответствия требованиям лицензии.
Другие преобразования шрифтов
Morph также поддерживает конвертацию OTF в WOFF2, WOFF в WOFF2, TTF в OTF и все другие комбинации TTF, OTF, WOFF и WOFF2. Нужны бесплатные шрифты для начала? Посмотрите более 1500 бесплатных шрифтов в библиотеке шрифтов Morph.