Как использовать шрифты от Google в Блоггере

понедельник, 27 сентября 2010 г. Долгие годы пользователи интернета, а так же создатели сайтов мучились из-за того что могли использовать лишь несколько шрифтов на своих ресурсах.
Сегодня же Google запустил новый сервис “Google web fonts” со слоганом – “Making the Web Beautiful!” (Делая Web красивым). Этот сервис поможет вам использовать различные шрифты из Google директорий в вашем блоге, либо на сайте без всяких регистраций и подписей. Использование шрифтов не имеет никаких ограничений. Сделайте свой блог красивее прямо сейчас. Итак приступаем…

Шаг 1: Сохраните резервную копию шаблона.
Этот шаг практически всегда на первом месте, перед тем как будут вноситься какие-либо изменения в тело шаблона. Для этого зайдите в настройки блога, Вкладка Дизайн/Изменить HTML и нажмите кнопку загрузить весь шаблон.
Шаг 2: Выберите шрифт.
Для этого зайдите Директорию шрифтов от Google и выберите любой понравившийся.

Шаг 3: Получите код шрифта.
В этой статье я буду использовать шрифт “Tangerine”, который понравился мне больше всего. Для того чтобы получить его код, нажмите на название и откроется новое окно! В нем необходимо нажать на вкладку “ Get the code”

Шаг 4: Добавляем код в тело шаблона
Теперь вам необходимо скопировать предоставляемый код и вставить его в тело шаблона. Вставлять код необходимо сразу после тэга:

<head>

Вставляемый код должен выглядеть примерно так:

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

Необходимо заметить, что перед закрывающим тэгом стоит поставить вот такой слэш “/”, так что верхний код будет выглядеть вот так:

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>

Копируете этот код и вставляете как уже упомянуто после тэга:

<head>

Код шрифта должен идти сразу же после тэга <head> , иначе могут возникнуть проблемы при просмотре шрифтов в Explorer и FireFox.

Далее нажимаем сохранить шаблон.

Теперь код добавлен в ваш шаблон.

Шаг 5: Добавляем CSS код в ваш шаблон.

Финальный шаг. Вы должны добавить следующий код там где вы хотите изменить шрифт в теле статьи. Для этого необходимо будет перейти при написании статьи в раздел “Изменить HTML”. Затем для того предложения в котором хотите изменить шрифт вставляем код:

<div style="font-family: 'Название шрифта', serif;">Ваш текст</div>

Вместо “Название шрифта” пишет название того шрифта который выбрали

Вместо “Ваш текст” пишет необходимый текст.

Если вы хотите изменить шрифт :

-Названия блога;

-Названия статьи;

-Текста всей статьи;

-Текста в боковых панелях.

То вам необходимо добавить Css код и для них. Не переживайте это совсем не сложно.

1.Чтобы изменить шрифт названия статьи найдите в теле шаблона следующий тэг:

.post h3

или

.post-title h3

Это основные виды общего CSS кода для названия статей в блоггере. Далее вам необходимо добавить, либо модифицировать следующий тэг ниже если он уже имеется в вашем шаблоне:

font-family: 'Название вашего шрифта';

Изменит “Название вашего шрифта” на название шрифта который вы выбирали во 2ом шаге.

В целом код после модификации должен выглядеть примерно так:

.post h3 {
font-family: 'Your Font Name';
}

Для остальных шрифтов ищите такие тэги:

-Заглавие блога: h1

-Название статьи: post h3 либо .post-title

-Шрифт статьи: .post-body

-Боковая панель: .sidebar h2

Если вы хотите изменить  шрифт в данных 4 позициях, ищите, их тэги в шаблоне, и затем как и при изменении заголовка статьи вставляйте тэг :

font-family: 'Название вашего шрифта';

после него.

Стоить заметить, что в некоторых шаблонах тэги заголовков могут отличаться, так что придется искать подобные тэги

Записная книжка на любой случай