Статьи о создании и продвижении сайтов, заработке в сети и софте

Как работать с модулем FontYourFace

Я недавно в статье «5 модулей для Drupal 7 в алфавитном порядке. Выпуск шестой»  немного писал о модули @FontYourFace. Теперь же пришло время поближе познакомиться с этим модулем и его возможностями.

Модуль @FontYourFace позволяет использовать дополнительные шрифты для заголовков, простого текста и других стилей, которых вы используете на своем сайте.

Для каждого стиля можно задать свой шрифт, например, для заголовка H1 это может быть один шрифт, для H3 другой, а для основного текста третий шрифт.

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

Не все шрифты поддерживают кириллицу, основная масса изначально доступных шрифтов поддерживает только латиницу. Поэтому целесообразно с интернета загрузить наборы шрифтов в локальный компьютер, установить их в компе в спец папке для шрифтов и открыв текстовый редактор посмотреть, какие шрифты поддерживают кириллицу, потом из этого списка запомнить названия наиболее понравившихся шрифтов и загрузить их в свой сайт, используя интерфейс настройки модуля @FontYourFace.

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

Но иногда случается так, понимаешь, что не плохо было бы, если в заголовках использовать вот этот редкий шрифт, который больше подходил бы тематике сайта, нежели простые шрифта а ля Тахома или Ариал.

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

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

Настраивать этот модуль тем, кто хоть немного знаком с CMS Drupal 7, не составит особого труда, но все же быстренько пробежимся над настройками и интерфейсом работы с модулем.

Скачать его рекомендую, естественно, с официального сайта

После установки модуля включаем все галочки в разделе «Модули». Первый «@font-your-face» сам модуль, второй «@font-your-face UI» включает интерфейс работы с модулем, остальные подмодули нужны для того, чтобы загрузить список шрифтов со сторонних ресурсов:

Как работать с модулем FontYourFace

После этого сначала идем на раздел «Модули», снова находим строку «@font-your-face UI» и в этой строке нажимаем «Настройки», в открывшемся окне загружаем те шрифты с сервисов, которые не загрузились автоматом при включении модулей. Но тут у нас не получится загрузить шрифтов со свех сайтов, в некоторых сайтах требуется регистрация и в настройках модуля указать специальные коды, подтверждающие, что вы там зарегистрировались.

Однако, в настройках есть блок «ПОСТАВЩИКИ» там есть возможность скачать одним кликом 1649 шрифтов с сервиса Fonts.com и 2233 шрифтов с Google:

Как работать с модулем FontYourFace

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

Для этого в настройках открываем вкладку «Import local font». Там следует заполнять специальные поля: дать желаемое название шрифту, которое будет действительно внутри сайта, так же задать стили CSS, по мне, лучше всего выбрать «Нормальный». А дальше уже, собственно, скачать сам шрифт. Как видите, можно скачать несколько форматов шрифта, чаще всего шрифты бывают в формате TTF:

Как работать с модулем FontYourFace

После этого мы можем назначить нужные нам шрифты для нужных нам стилей. Для этого идем в раздел «Оформление», там сейчас появилась новая вкладка «@Font-Your-Face», ее и открываем. В открывшемся под основными вкладками окна появляются две дополнительные: «Browse all fonts» и «Enabled fonts». Идем в «Browse all fonts», в открывшемся окне мы видим интерфейс настройки модуля, где есть список шрифтов, и имеем возможность включить нужный нам шрифт.

Так же чуть ниже, чем основные вкладки, с левой стороны экрана появились 7 дополнительных вкладок, в каждой вкладке свой набор шрифтов, некоторые пустые пока, как их всех скачать, мы рассмотрели чуть раньше. Одна из вкладок называется «Local Fonts», там вы сможете найти те шрифты, которых вы сами загрузили.

Собственно, процесс включения нужного шрифта состоит из двух шагов:

1. Включаем нужный нам шрифт:

Как работать с модулем FontYourFace

2. После этого идем в «Enabled fonts», и там делаем следующее: в настройках CSS SELECTOR указываем тот стиль, для которого требуется задать тот или иной шрифт. Там есть несколько вариантов, так же можно ввести свой индивидуальный стиль, если нет нужного в списке. Например, я один шифт задал для всех типов Заголовков, а второй шрифт для основного текста на сайте, текста, который находится между тегами p или div. Естественно, не забываем сохранять заданные нами настройки:

Как работать с модулем FontYourFace

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

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

Вот и вся работа с модулем @FontYourFace. Если понадобится отключать ранее заданные шрифты или задать новый шрифт, просто следует повторять только что описанные шаги, и посетители вашего сайта будут наслаждаться различными красивыми шрифтами на вашем Друпал сайте.

Кстати, этот модуль делает работу с CMS Drupal еще приятнее и легче и позволяет нам добиться поставленных целей при разработке дизайна сайта.

Добавить комментарий