Столкнулся (в очередной раз) с некорректной работой конвертера fontsquirrel.com (для некоторых шрифтов он очень заметно деформирует символы шрифта) и решил разобраться каким образом можно самостоятельно получить оптимизированные файлы шрифта для использования при верстке сайтов.

Требования к инструментарию:

Рассматривать буду все в разрезе использования консоли и nodejs/npm. Если вы еще не начали использовать консольные инструменты, самое время начать.

Оптимизация шрифта

Задача: оставить в шрифте только те символы, которые необходимы на проекте. В моем случае, это цифры, латиница, кириллица (не целиком) и некоторые другие (кавычки, тире и т.п.) символы.

Для этих целей обнаружил три инструмента:

fonttools

Лучший из найденных инструментов. Требует установленного Python. Ставим инструмент и потом в консоли:

pyftsubset fonts/Roboto-Black.ttf --output-file=fonts/Roboto-Black--pyftsubset.ttf --unicodes-file=codes.txt

Результат для TTF:

После конвертации в WOFF и WOFF2 размеры файлов становятся еще приятнее.

Из обнаруженных минусов:

  1. Пропущенные через инструмент шрифты при открытии стандартным инструментом просмотра шрифтов (по кр. мере, на Windows) выдают ошибку (браузер переваривает их корректно).
  2. Я получил файл нулевой длинны для одного из конвертируемых шрифтов. Странный глюк с неизвестной причиной (пришлось использовать fontforge).

fontforge

Бесплатное кроссплатформенное ПО для редактирования шрифтов, в т.ч. можно выделить и очистить площадки символов, которые не нужны на проекте, радикально уменьшив размер файла.

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

fontmin

Устанавливаем глобально и потом в консоли можно:

text="`cat subset.txt`" && fontmin -t "$text" fonts/lato.ttf > fonts/lato--fontmin.ttf

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

Конвертирование шрифта

ttf2woff

Ставим инструмент глобально и потом в консоли:

ttf2woff fonts/lato.ttf fonts/lato--ttf2woff.woff

Указывается путь и имя исходного и результирующего файла.

ttf2woff2

Ставим инструмент глобально и потом в консоли:

cat fonts/lato.ttf | ttf2woff2 >> fonts/lato--ttf2woff2.woff2

Указывается путь и имя исходного и результирующего файла.

Прочие инструменты (веб-сервисы)

font2web.com — конвертер

freefontconverter.com — конвертер

web-font-generator.com — конвертер

webfont.ru — конвертер и оптимизатор

fontsquirrel.com — конвертер и оптимизатор

Смотри так же