Доброго времени суток, уважаемые читатели! Сегодня я решил затронуть такую вещь, как добавление красивых шрифтов в оформление блога, да и сайта тоже. В Интернете есть несколько сервисов с коллекцией красивых шрифтов, однако больше всего мне понравился Google Fonts.
Ничего сложного и сверхъестественного в установке шрифтов Google Fonts нет. Но об этом попозже. Сначала небольшой его обзор.
Google Fonts я использовал при верстке шаблона своего блога в названии блога и заголовках виджетов:
Даже не знаю, с чего начать обзор, потому что зайдя на главную страницу Google Fonts можно сразу же увидеть коллекцию шрифтов с образцами в действии:
Слева от образцов шрифтов можно с помощью фильтра выбрать, какие шрифты нужны именно нам.
Доступны следующие типы шрифтов:
- Serif
- Sans Serif
- Display
- Handwriting
- Monospace
Также можно отрегулировать толщину, угол наклона (курсив) и ширину.
И в самом низу можно выбрать кодировку шрифта — Cyrillic, Cyrillic Extended, Devanagari, Greek, Greek Extended, Khmer, Latin, Latin Extended и Vietnamese.
В соответствии с настройками фильтра в правой колонке появятся шрифты по заданным параметрам.
Выбираем понравившийся шрифт, нажав на стрелку (Quick use):
Обратите внимание! Не все шрифты поддерживают русский язык и не поддерживаются некоторыми браузерами, особенно мобильными!
Вот так выглядит мой блог в браузере Opera mobile:
Далее на странице выбираем способ установки шрифта от Google fonts — через html, через CSS (@import), или JavaScript.
Я выбрал способ №2, поэтому расскажу о нем подробнее.
В поле «Add this code to your website» нажимаем на вкладку @import и копируем приведенный код в самое начало файла стилей блога style.css:
А из поля Integrate the fonts into your CSS берем код шрифта и прописываем его для нужного элемента блога.
В качестве примера приведу код, который я добавил в файл style.css своего блога для заголовков виджетов, а также что прописал в файле sidebar.php.
В самом начале файла style.css я добавил поддержку красивого шрифта с сервера Google, скопировав код из поля «Add this code to your website» вот это:
1 | @import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); |
А для формирования такой сложной конструкции заголовков виджетов добавил в тот же style.css это:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | #titleside{ font-size: 1.2em; color: blue; font-family: 'Bad Script', cursive; font-weight: bolder; letter-spacing:2px; height:37px; padding: 3px 8px; display:block; z-index:2; text-shadow:1px 1px 1px #fff; margin: 5px 0 9px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 1px 9px; -webkit-box-shadow: 0px 1px 9px; box-shadow: 0px 1px 9px; background: #ffff99 url('images/icons/paperclip3.png') no-repeat right; opacity:0.6; } #titleside:before{ border: solid; border-color: #ffff99 transparent; border-width: 10px 6px 0 6px; float:right; content: ""; top:40px; right:13px; position:relative; } |
И для того, чтобы вся эта красота отображалась, в файл sidebar я добавил вот это:
1 2 3 4 5 6 7 8 9 | <?php $args = array('before_widget'=>'', 'after_widget'=>'', 'before_title'=>'<div id ="titleside">', 'after_title'=>'</div>'); if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('right') ) : echo '<p />'; endif; ?> |
Результат Вы можете увидеть в сайдбаре моего блога.
Все вопросы по установке шрифта Вы можете задавать в комментариях. До встречи в следующих постах!
Я себе на некоторых сайтах так же прописываю вручную, а на некоторых использую плагин WP Google Fonts, очень удобный в настройке, мне нравится.
Ну я стараюсь использовать поменьше плагинов.
Красивые шрифты на блоге — не только оказывают эстетическую функцию, но и выделяют блог среди других. Особенно это актуально, если используется распространенный шаблон оформления
Жалко, что не все браузеры понимают Google fonts.
Если только не перегибать палку…А то порой зайдешь на чей-нибудь блог, а там «мама не горюй» все какое-то попугайское…
Пользовался WP Google Fonts для этих целей, а теперь у меня шаблон поддерживает несколько шрифтов и плагин я отключил.
Правильно! Нужно стараться меньше плагинов ставить, а использовать код.
Статья помогла, спасибо.