Google Fonts — добавляем красивые шрифты на блог!

Доброго времени суток, уважаемые читатели! Сегодня я решил затронуть такую вещь, как добавление красивых шрифтов в оформление блога, да и сайта тоже. В Интернете есть несколько сервисов с коллекцией красивых шрифтов, однако больше всего мне понравился 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;
?>

Результат Вы можете увидеть в сайдбаре моего блога.

Все вопросы по установке шрифта Вы можете задавать в комментариях. До встречи в следующих постах!