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

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

 888    d8P   888b     d888            8888888b.  
888 d8P 8888b d8888 888 Y88b
888 d8P 88888b.d88888 888 888
888d88K 888Y88888P888 .d8888b 888 d88P
8888888b 888 Y888P 888 88K 8888888P"
888 Y88b 888 Y8P 888 "Y8888b. 888 T88b
888 Y88b 888 " 888 X88 888 T88b
888 Y88b 888 888 88888P' 888 T88b


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