Вы здесь

Дизайн Как установить шрифт в Drupal 7 с @font-your-face

Как установить шрифт в Drupal 7 с @font-your-face

Иногда нам нужно применить различные шрифты для текста на нашем веб-сайте и это совсем не сложно. Есть много способов подключить шрифт к сайту, на так как мы используем CMS Drupal мы можем использовать для подключения шрифта модуль @font-your-face, который позволяет добавить любой шрифт на ваш веб-сайт. Я покажу вам следующие шаги для установки и использования этого модуля.

Модуль @font-your-face может делать следующее:

  • Шрифты можно применить к конкретному тексту на веб-сайте, он может использовать семейство шрифтов идентификатор в файле CSS или написание CSS селектор в интерфейсе модуля @font-your-face напрямую.
  • Вы можете импортировать ваши собственные локальные шрифты с СРВ, TTF, WOFF у SVG форматов.

Ссылка на модуль: http://drupal.org/project/fontyourface

Установка модуля @font-your-face:

  • Распакуйте скачаный архив модуля и загрузите папку модуля в папку для модулей сайта ( sites/all/modules/fontyourface) .
  • Перейдите в раздел управления модулями (admin/modules) и включите модули @font-your-face, @font-your-face UI также включите под модули которые необходимы для работы.

Страница модулей

Другие опции которые мы можем включить:

  • Локальные шрифты (Local fonts): позволяет применить любые включенные шрифты в теме которые мы используем.
  • WYSIWYG for @font-your-face : Добавляет доступный список шрифтов к WYSIWG редактору.

После установки модуля:

  • Переходим на страницу настроек модуля @font-your-face (admin/appearance/fontyourface/browse) чтобы включить шрифты.
  • здесь, Вы можете видеть шрифты которые Вам нужны, например, введите: Dosis. И Вам будут предоставлены все шрифты с этим именем.
  • Ниже каждого шрифта есть опция включить его, кликните включить шрифт который Вам нужен. Так же там есть опция отключить шрифт.

Настройки модуля @font-your-face

Если мы хотим, мы можем выбрать CSS селектор к которому будет применен выбранный шрифт. Например: H1, H2 и другие. Настройки модуля @font-your-face

Также, когда Вы редактируете шрифт, здесь всегда есть опция указать несколько CSS селекторов через запятую.

Настройки модуля @font-your-face

2. Используйте @font-your-face модуль через .info файл темы:

  • В настойках модуля ( /admin/appearance/fontyourface ), кликните на вкладке “In theme” .
  • И Вы увидете код с шрифтами которые уже используютсья.
  • Скопируйте этот код.
  • Вставте этот код в ваш файл theme.info темы .
  • Затем используя font-family идентификатор в CSS файле темы, мы можем применять шрифт, который мы уже включили.

Пример кода:

Настройки модуля @font-your-face

3. Импорт локальных шрифтов. Иногда мы не можем найти шрифты, которые мы хотим применить, поэтому @font-your-face дает нам возможность импортировать локальные шрифты.

  • В настойках модуля ( /admin/config/user-interface/fontyourface/local_fonts )
  • Добавлем название шрифта, выбираем стиль шрифта (style) и жирность (font-weight).
  • Загружаем шрифт на сервер, это могут быть EOT, .TTF, .WOFF, .SVG форматы файлов.
  • Затем, используя font-family идентификатор в CSS файле Вашей темы, Вы можете применить шрифт, который мы уже включили.

Настройки модуля @font-your-face

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

Похожие материалы

Комментарии

Спасибо за труды! Очень пригодилось. Добавлю остальным читателям от себя, что если хотите пользоваться данным модулем без ошибок, то скачивайте версию dev (на текущий момент версия от 7.02.2012)

Извиняюсь... *7.02.2013

Да, классная статья, и классный модуль, мне понравился. Я тоже на своем сайте напишу об этом модуле, но только в общих чертах, и поставлю сюда ссылку, тут все подробно объяснено.

Wow! Great thikning! JK

Wow, that's a really clever way of thkining about it!

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

CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
CAPTCHA на основе изображений
Введите код с картинки