Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

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

font

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

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

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

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

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

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

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

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

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

webfont kit

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

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

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

webfont generator

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

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

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

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

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

hinting  rendering

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

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

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

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

subset

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

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

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

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

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

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

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

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*