Встраивание нестандартного шрифта с сервисом Fontsquirrel
font

Встраивание нестандартного шрифта с сервисом Fontsquirrel

Nikel, 18.12.2014

Перед тем, как начать обзор сервиса  fontsquirrel.com, нужно пару слов сказать о том, что же из себя представляет правило @font-face, и зачем нам вообще понадобился какой-то генератор шрифтов.

Например, рассмотрим такую ситуацию — вы хотите внедрить шрифт Bitter, который находится в той же папке, что и файл стилей.

Теперь этот шрифт можно использовать в дальнейшем, так как мы привыкли, в  файле стилей, задавая для отдельных html  элементов  свойство font, в котором указано имя bitterregular.

Несмотря на все преимущества и правильность метода, в отличие от тех «костылей», которые использовались ранее, у него есть и свои недостатки. Одним из них является отсутствие кроссбраузерности.  Для того, чтобы все браузеры адекватно восприняли это правило, нужно перевести шрифт в формате ttf/otf в другие возможные форматы — EOT, WOFF, SVG.

После  произведенных манипуляций правило будет выглядеть так

Как встроить бесплатный шрифт из коллекции сервиса Fontsquirrel?

Переходим  на сайт fontsquirrel.com в раздел, где находятся шрифты, поддерживающие кириллицу. В списке всех доступных для скачивания шрифтов можно сразу увидеть их название,начертание, имя автора и количество стилей, а также скачать их в формате OTF/TTF.

кириллические шрифты

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

  • Specimens — здесь выводится  текст, к которому применен шрифт из  выпадающего списка.
    отображение выбранного шрифта
  • Test Drive — мы сами имеем возможность написать произвольный текст, чтобы увидеть, как будет он выглядеть с выбранным вариантом начертания
    test drive
  • Glyphs — на этой вкладке отображаются все символы, которые содержит данный вариант шрифта
  • License — страница для ознакомления с лицензией
  • Webfont Kit — если лицензия шрифта позволяет, то его можно использовать для внедрения и задавать некоторые настройки на этой вкладке. Уменьшать размер файла, сокращая количество символов в наборе (это можно сделать путем выбора языка) — Choose a Subset  и выбирать требуемые форматы файлов — Choose Font Format. Когда все настройки сделаны, достаточно нажать кнопку download @font-face kit, чтобы скачать архив.

webfont kit

Не во всех случаях можно скачать Kit, в списке попадаются шрифты с какой-то особой лицензией  SIL OFL, которая не позволяет распространять их в преобразованном виде, поэтому для них требуется самостоятельно использовать WebFont Generator.

Как можно с  Fontsquirrel сгенерировать шрифты для web на основе своего, произвольного шрифта?

На том же сайте откроем вкладку WEBFONT GENERATOR и увидим такую форму.

webfont generator

Кнопка Add Fonts служит для добавления требуемого шрифта. Интуитивно тут все понятно, просто выбираем шрифт на компьютере, и файл загружается на сервер.

Далее нам предоставляется возможность выбрать из трех режимов генерации.

  • BASIC — прямое преобразование с минимальной обработкой, никакой оптимизации файла не проводится
  • OPTIMAL — оптимальные настройки производительности и скорости, дают неплохой результат и идеально подходят в том случае, если вы не хотите вникать в нюансы оптимизации шрифтов или не разбираетесь в этом.
  • EXPERT — возможности ручной настройки параметров для специалистов — экспертов. Посмотрим, что можно изменить в этом режиме.

Font Formats — файловые форматы для обеспечения кроссбраузерности. Можно оставить как есть. Хочу сказать, что прослеживается тенденция поддержки ttf (True Type) большинством браузеров, за исключением IE. SVG используется для совместимости с IPhone.

форматы файлов

Настройки TrueType хинтинга и рендеринга оставим по умолчанию.

hinting  rendering

  • Fix Missing Glyphs — добавление отсутствующих в шрифте символов — пробелов и переносов.
  • X-height Matching — изменение размера, чтобы он соответствовал высоте латинского символа x выбранного шрифта. Полезно в том случае, если возникнет такая ситуация, что потребуется замена на стандартный шрифт.
  • Protection — защита от использования в системе шрифта для web.

другие настройки

Subsetting —  ключевой параметр, он позволяет выбрать то подмножество символов, которое нам потребуется. По умолчанию установлен radiobutton Basic Subsetting, что совершенно не подходит нам, так как это вариант для западных языков, латиница. Жмем Custom Subsetting…, чтобы выбрать кириллицу (для этого в разделе language устанавливаем флажок Cyrillic).

Тут еще есть некоторые настройки, которые следовало бы рассмотреть.

  • Character Type — типы символов, которые будут вами использоваться, распределенные по группам (цифры, пунктуация, типографические, математические символы и т.п.), так можно сократить объем файла.
  • Unicode Tables — таблицы Unicode, которые можно добавить
  • Single Characters, Unicode Ranges — включение соответственно одиночных символов и диапазона символов.

Кроме того имеется возможность просмотреть полученный набор символов.

subset

Возможности CSS

  • Base64 Encode — встраивание  шрифта в сам css-файл, путем кодирования данных в формате base64.
  • Style Link — добавляет свойства font-style и font-weight к селектору @font-face.
  • CSS Filename — определяет название генерируемого файла CSS, по умолчанию stylesheet.

Дополнительные опции можно оставить как есть

  • Font Name Suffix — добавление суффикса в название файла
  • Em Square Value — частота разбиения кегельного квадрата. Подробнее про этот параметр читайте здесь.
  • Adjust Glyph Spacing — регулирование межсимвольных интервалов
  • Shortcuts — при желании можно установить галочку, чтобы сделанные настройки были запомнены.

специальные настройки

Кстати, обратите внимание на  предупреждение, выделенное  красным — Yes, the fonts I’m uploading are legally eligible for web embedding.  Чтобы кит начал генерироваться , нужно отметить соответствующий чекбокс внизу. Таким образом, мы соглашаемся, что загружаемые нами шрифты разрешены для использования в web и fontsquirrel снимает с себя ответственность за наши действия. Сейчас у сервиса имеется в наличии черный список шрифтов, которые нельзя загружать.

предупреждение

Так нам открывается второй существенный минус использования правила @font-face. Шрифты являются объектом авторского права, и большая их часть используется платно. Так что стоит хорошо подумать, прежде чем применять на сайте первый попавшийся шрифт, который  понравился. Конечно находятся умельцы, которые удаляют метаданные шрифта и производят прочие манипуляции, но это  история для отдельного разговора.

После того, как все настройки сделаны, нажимаем на кнопку Download kit и скачиваем архив, содержащий demo.html, несколько шрифтов и стилевой файл. Копируем стили, переносим файлы шрифтов в папку шаблона или папку темы вашей CMS. Все готово.