Конвертер TTF в WOFF2
С этого начинается размещение шрифта на своём сервере: WOFF2 — формат, который все современные браузеры загружают в первую очередь, и самая компактная оболочка для уже имеющихся у вас данных TrueType. Эта страница также создаёт CSS-правило для его подключения.
Конвертер шрифтов
или перетащите сюда файлы TTF, OTF, WOFF … ·
Макс. 95 MB на файл· До 20 файлов· Удаляются через 30 минут
Файлы обрабатываются на наших серверах и удаляются через 30 минут.
Удаление неиспользуемых систем письма может уменьшить веб-шрифт с сотен КБ до менее чем 30 КБ. Для шрифтов, которые устанавливаются на компьютер, оставьте все символы.
Вставьте текст или символы, которые должен содержать шрифт, например слово из логотипа или заголовок. Всё остальное будет удалено.
Хинтинг делает мелкий текст чётче на экранах Windows. Его удаление часто уменьшает веб-шрифты на 10–30%; автохинтинг добавляет его шрифтам, где его нет.
Оставьте поле пустым, чтобы сохранить исходное имя. Переименование позволяет установить преобразованный шрифт рядом с оригиналом без конфликта.
Например, Regular, Bold, Italic. Оставьте поле пустым, чтобы сохранить исходное имя начертания.
Как пользоваться инструментом
- 1
Загрузите файлы TTF
Добавьте все начертания и стили, которые планируете использовать: до 20 файлов, каждый до 95 MB. Вариативные TTF тоже подходят и сохраняют свои оси.
- 2
Оставьте CSS включённым и по возможности создайте подмножество
Флажок Добавить CSS с @font-face уже установлен. В разделе Расширенные настройки выберите для параметра Оставить символы значение «Базовая латиница» или «Латиница + диакритика», если ваш сайт на западном языке, и подумайте о значении «Удалить» для параметра Хинтинг.
- 3
Конвертируйте в WOFF2
Нажмите Преобразовать в WOFF2 и скачайте шрифты вместе с файлом .css. Загрузите оба на сайт и подключите таблицу стилей или вставьте правило в свою.
Как конвертировать TTF в WOFF2 для сайта?
Загрузите .ttf, оставьте установленным флажок Добавить CSS с @font-face и нажмите Преобразовать в WOFF2. Вы получите файл .woff2 и файл .css с правилом @font-face, которое на него ссылается.
Почему для сайта стоит выбирать веб-шрифт WOFF2
TTF — это несжатые табличные данные: контуры, метрики, кернинг, имена. WOFF2, опубликованный как рекомендация W3C в 2018 году, сохраняет те же таблицы, но пропускает их через Brotli, алгоритм сжатия, выпущенный Google в 2015 году, предварительно перестроив контуры глифов так, чтобы они лучше сжимались. По собственным тестам Google, WOFF2 в среднем примерно на 30% меньше старого формата WOFF, а после загрузки браузер восстанавливает исходные данные шрифта, так что форма букв не меняется.
Шрифты блокируют отрисовку, поэтому их размер важнее, чем кажется по килобайтам. Пока веб-шрифт не загрузился, браузер либо скрывает текст, либо показывает запасной шрифт, а поздняя подмена может сдвинуть макет. Меньшие файлы сокращают это окно, а две опции здесь сокращают его ещё сильнее: Оставить символы убирает глифы, которые ваши страницы не показывают, а значение «Удалить» для Хинтинг отбрасывает инструкции, которые телефоны и экраны высокой плотности всё равно игнорируют. Храните исходные TTF для настольного использования; WOFF2 в TTF позже распакует веб-шрифт, но не вернёт глифы, удалённые при создании подмножества.
Размер файла: TTF и WOFF2
TTF, полный набор символов
100%
Несжатые таблицы шрифта, как при установке на компьютер
WOFF2, подмножество «Базовая латиница»
часто 10–25%
Сжатие Brotli плюс меньше глифов; зависит от шрифта
Правило @font-face для шрифта WOFF2
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF;
}Поддержка WOFF2 в браузерах по версиям
2014
Chrome 36
Браузер Google первым декодирует WOFF2 по умолчанию.
2015
Firefox 39
Mozilla включает декодирование WOFF2 по умолчанию.
2016
Edge 14
Оригинальный Edge от Microsoft получает WOFF2 с юбилейным обновлением Windows 10.
2018
Рекомендация W3C
Спецификация утверждена; к этому времени Safari на macOS и iOS тоже декодирует WOFF2.
TTF
Шрифт TrueType
TTF — формат шрифтов TrueType, разработанный Apple в конце 1980-х годов, выпущенный в 1991 году и затем лицензированный Microsoft. Он описывает контуры глифов квадратичными кривыми и содержит инструкции хинтинга, благодаря которым текст выглядит чётко на экране. TrueType поддерживают все настольные операционные системы, текстовые редакторы и дизайнерские программы. В нём нет некоторых продвинутых типографских возможностей OpenType, а файлы больше, чем у веб-форматов шрифтов.
- Сжатие
- Без потерь
- Прозрачность
- –
- Анимация
- –
- Год появления
- 1991 · Apple
WOFF2
Web Open Font Format 2
WOFF2 — вторая версия Web Open Font Format, основанная на сжатии Brotli от Google и опубликованная как Рекомендация W3C в 2018 году. Файлы примерно на 30% меньше, чем WOFF, что ускоряет загрузку страниц. WOFF2 поддерживают все современные браузеры, и это рекомендуемый формат для веб-шрифтов. Настольные операционные системы и дизайнерские программы не могут установить его напрямую.
- Сжатие
- Без потерь
- Прозрачность
- –
- Анимация
- –
- Год появления
- 2018 · W3C (Google)
TTF в WOFF2 упаковывает настольный шрифт в контейнер со сжатием Brotli, который предпочитают браузеры, так что те же глифы доходят до посетителей в меньшем объёме; обратная страница нужна тем, кому надо установить шрифт, найденный в интернете.
Вопросы о конвертации TTF в WOFF2
Нужен ли ещё запасной TTF или WOFF рядом с WOFF2?
Для публичных сайтов сегодня обычно не нужен. Chrome, Edge, Firefox и Safari читают WOFF2 уже много лет, а браузеры, которые его не поддерживают, например Internet Explorer 11, редко стоят отдельного файла. Добавляйте результат TTF в WOFF вторым значением src, только если аналитика показывает таких посетителей.
Почему шрифт WOFF2 всё ещё весит больше 100 KB?
Сжатие уменьшает только способ хранения глифов, а не их количество. Шрифт с латиницей, кириллицей, греческим и вьетнамским включает все эти символы. Чтобы текстовый шрифт весил десятки килобайт, нужно оставить только те алфавиты, которые вы действительно показываете.
Что делает font-display: swap?
Это указывает браузеру сразу показывать текст запасным шрифтом и подменить его вашим веб-шрифтом, когда тот загрузится, а не скрывать текст на время загрузки. Добавьте её в правило @font-face, как в примере выше, или используйте optional, если на медленном соединении лучше обойтись без поздней подмены.
Можно ли конвертировать TTF из Google Fonts в WOFF2 и разместить у себя?
Да. Семейства Google Fonts выпускаются под лицензией SIL Open Font License или Apache License, обе разрешают конвертацию и размещение на своём сервере. Кроме того, при собственном хостинге файла не нужен запрос к стороннему серверу.
Работает ли WOFF2 в email-рассылках?
Только в некоторых клиентах. Apple Mail и почта iOS загружают веб-шрифты через @font-face, а Gmail и большинство версий Outlook их игнорируют и показывают запасной шрифт. Всегда указывайте в списке шрифтов письма безопасный системный шрифт.