Подключение шрифтов 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 - работает.
(

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

  .d88888b.    .d88888b.    .d8888b.   888    d8P  
d88P" "Y88b d88P" "Y88b d88P Y88b 888 d8P
888 888 888 888 888 888 888 d8P
888 888 888 888 888 888d88K
888 888 888 888 888 88888 8888888b
888 Y8b 888 888 Y8b 888 888 888 888 Y88b
Y88b.Y8b88P Y88b.Y8b88P Y88b d88P 888 Y88b
"Y888888" "Y888888" "Y8888P88 888 Y88b
Y8b Y8b

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