Подключение шрифтов Google Fonts к Drupal
Надоело уже смотреть, какими извращенными методами к Drupal подключаются внешние шрифты от того же Google Fonts, что решил я написать небольшую заметку по этому поводу. Также при проектировании нового ресурcа советую загонять дизайнера на Google Fonts, чтобы он использовал тамошние шрифты и не выдумывал ничего лишнего.
Итак, для начала небольшой экскурс как пользоваться Google Fonts.
- Переходим на сайт Google Fonts;
- Если предстоит работа с кириллицей (они же русские буквы), выбираем в выпадающем списке слева Script опции Cyrillic или Cyrillic Extended;
- Выбираем понравившийся шрифт и жмем Quick Use.
Шрифт выбран, теперь осталось определиться какие стили нам нужны. Не рекомендую выбирать все, что можно, так как любая дополнительная опция увеличивает время загрузки страницы. Браузеры, как правило, конечно кешируют загруженные шрифты, но при первой загрузке сайта пользователь может не выдержать всех этих дерганий страницы и уйти.
Для дальнейших действий нам потребуется путь до сгенерированного шрифта:
Подключение в <head> Drupal
Подключать шрифты предлагаю, как истинные разработчики, через код страницы. Вообще данный прием можно использовать не только для подключения шрифтов в шапке сайта.
Отыскиваем в папке с темой файл template.php. Если его нет - создаем и помещаем следующий код:
- /**
- * Implements hook_preprocess_HOOK().
- */
- function THEME_NAME_preprocess_html(&$vars) {
- // Подлкючаем Google шрифты.
- $fonts = array(
- 'google_font_lobster' => 'http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic',
- 'google_font_tinos' => 'http://fonts.googleapis.com/css?family=Tinos&subset=cyrillic,latin',
- );
-
- foreach ($fonts as $fid => $font) {
- $element = array(
- '#tag' => 'link',
- '#attributes' => array(
- 'href' => $font,
- 'rel' => 'stylesheet',
- 'type' => 'text/css',
- ),
- );
- drupal_add_html_head($element, $fid);
- }
- }
В качестве ключей массива шрифтов $fonts можно использовать произвольные названия, но, разумеется, такие, чтобы они были уникальными и ничего не перекрывали. Ничего сложного, как оказалось, и смотрится симпатично.
Комментарии
я просто в css файл добавляю @import
З.Ы: капча нереальная
в 17 строке кода запятая не лишняя?
У меня не работает код(
@импорт в файле style.css - работает.
(
Добавить комментарий