Подключение шрифтов 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                 8888888888  888    888 
888 888 888 888
888 888 888 888
88888b. .d8888b 8888888 8888888888
888 "88b d88P" 888 888 888
888 888 888 888 888 888
888 d88P Y88b. 888 888 888
88888P" "Y8888P 8888888888 888 888


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