вторник, ноября 23, 2010

Как внедрить шрифты Google API в своем блоге

C помощью Google Font API использование дополнительных шрифтов в Blogger перестало быть проблемой. До недавних пор шрифты из “набора” Google не поддерживали кириллицу, но сейчас, хоть выбор еще ограничен, но все-таки он есть и вы можете выбрать из 4 основных кирилличных шрифтов тот, который вам больше подходит.
Если вы хотите использовать на своем блоге один из шрифтов Google Font API, нужно сделать несколько несложных шагов. Для ставки в шаблон Blogger я выбрала шрифт “Philosopher”.

1. Выбор шрифта. Итак, выберите в списке шрифтов тот шрифт, который вам по душе. Как вы видите, во вкладке можно выбрать только кириллические шрифты. Нажмите на название шрифта.


2. Копирование кода шрифта. В окне описания шрифта пройдите в четвертую вкладку "”Get the code” и скопируйте код из первого и второго “окошка” в блокнот:

3. Внедрение шрифта в шаблон. Чтобы внедрить этот шрифт в шаблон, пройдите в “Дизайн”-“Изменить HTML”. Сделайте резервную копию шабона. Потом с помощью Ctrl+F найдите в шаблоне
<head>



и сразу после этой строчки вставьте скопированный код шрифта:
<link href='http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic' rel='stylesheet' type='text/css'>



4. Изменение кода шрифта. Если вы попытаетесь сохранить его в таком виде, шаблон выдаст ошибку.
a) По-первых, нужно добавить слеш перед скобкой:
<link href='http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic' rel='stylesheet' type='text/css'/>


б) Во-вторых, этот знак “&” обрабатывается неправильно, поэтому его надо заменить на “&amp;” – мой код выглядит вот так:
<link href='http://fonts.googleapis.com/css?family=Philosopher&amp;subset=cyrillic' rel='stylesheet' type='text/css'/> 
 
5. Использование шрифта в блоге. Найдите в шаблоне фрагмент(ы) кода css, отвечающие за заголовки (h1, h2, h3 ) и добавьте  в него свойство шрифта (скопированное б блокнот из второго “окошка”)
h1 { font-family: 'Philosopher', arial, serif; }

К примеру, если нужно применить  этот шрифт в заголовках публикаций, код может выглядеть приблизительно так:
.post h2 {
color:#2266BB;
font-family: 'Philosopher', arial, serif; 
font-size:28px;
font-weight:normal;
line-height:34px;
margin:4px 0 14px;
text-shadow:0 1px 1px rgba(64, 64, 64, 0.13);
}




или так:
#header h3 {
padding:0 0 4px;
line-height:1.2px;
letter-spacing:.2em;
font-family: 'Philosopher', arial, serif;
} 

Точно так же можно изменить шрифт названий виджетов в боковой панели.
Можно применять более одного шрифта Google, прописав его код там, где вам нужно, к примеру:
h1 { font-family: 'Lobster', arial, serif; }
h2 { font-family: 'Cantarell', arial, serif; }

Web Analytics