Подключение шрифтов Google Fonts к Drupal

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

Итак, для начала небольшой экскурс как пользоваться Google Fonts.

  1. Переходим на сайт Google Fonts;
  2. Если предстоит работа с кириллицей (они же русские буквы), выбираем в выпадающем списке слева Script опции Cyrillic или Cyrillic Extended;
  3. Выбираем понравившийся шрифт и жмем Quick Use.
Выбор шрифта Google Fonts

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

Настройки Google Fonts

Для дальнейших действий нам потребуется путь до сгенерированного шрифта:

Путь для Drupal

Подключение в <head> Drupal

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

Отыскиваем в папке с темой файл template.php. Если его нет - создаем и помещаем следующий код:

  1. /**
  2.  * Implements hook_preprocess_HOOK().
  3.  */
  4. function THEME_NAME_preprocess_html(&$vars) {
  5. // Подлкючаем Google шрифты.
  6. $fonts = array(
  7. 'google_font_lobster' => 'http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic',
  8. 'google_font_tinos' => 'http://fonts.googleapis.com/css?family=Tinos&subset=cyrillic,latin',
  9. );
  10.  
  11. foreach ($fonts as $fid => $font) {
  12. $element = array(
  13. '#tag' => 'link',
  14. '#attributes' => array(
  15. 'href' => $font,
  16. 'rel' => 'stylesheet',
  17. 'type' => 'text/css',
  18. ),
  19. );
  20. drupal_add_html_head($element, $fid);
  21. }
  22. }

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

Комментарии

Аватар пользователя xandeadx
xandeadx

я просто в css файл добавляю @import

З.Ы: капча нереальная

Аватар пользователя angarsky
angarsky
Можно и так, но это же блог о Drupal :) Да и наглядный пример добавления тегов в head будет не лишним.
Аватар пользователя Платон
Платон

в 17 строке кода запятая не лишняя?

У меня не работает код(
@импорт в файле style.css - работает.
(

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

 8888888888  888    d8P   Y88b   d88P   .d8888b.  
888 888 d8P Y88b d88P d88P Y88b
888 888 d8P Y88o88P 888 888
8888888 888d88K Y888P 888
888 8888888b d888b 888 88888
888 888 Y88b d88888b 888 888
888 888 Y88b d88P Y88b Y88b d88P
8888888888 888 Y88b d88P Y88b "Y8888P88


Зарегистрируйтесь для добавления материалов без проверки.