воскресенье, 19 декабря 2010 г.

Как использовать шрифты Google Custom в Blogger

Как известно есть некоторое количество общепринятых шрифтов,которые именуются web-шрифтами.
Этим летом команда Гугл запустила новый сервис Google web fonts,это позволяет применять нестандартные шрифты из каталога Google без каких-либо регистраций,бесплатно и возможностью применять как в личных,так и в коммерческих целях.
Такое нововведение позволит сделать блог более привлекательным и разнообразным.
Действия следующие:
Идём в редактирование шаблона,сохраняем копию шаблона,на всякий случай.
Теперь идём по этой ссылке ,выбираем нужный шрифт,настраиваем его,и получаем код.
Ищем у себя в шаблоне код <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> и сохраняем шаблон.
Теперь шрифт сохранён и его можно применить .

Чтобы использовать его где-то в постах,добавляем этот код:

<div style="font-family: 'FontName', serif;">Your text</div>
Ну а чтобы добавить шрифт к заголовкам виджетов,тексту поста,заголовку блога и т.п,то надо добавить CSS код (он также у гугла получается по ссылке выше).
Ищем код того,к чему применим шрифт,например:
.post h3 (или .post-title ) -Заголовок поста
.post-body -сообщения
.title -заголовок блога
.sidebar -виджеты
Ну и добавляем:

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

Демо можно посмотреть здесь.

7 комментариев:

  1. Там я русских шрифтов не нашел!где найти? раскладка клавы на превью при обычном переключении на русский или английский не работает.

    ОтветитьУдалить
  2. Русские шрифты по ссылке http://www.google.com/webfonts?subset=cyrillic

    ОтветитьУдалить
  3. Так мало)). А вот в заголовок у вас написан красивым шрифтом, это уже в шаблоне было или находили где то шрифт или в фотошопе сделали?

    ОтветитьУдалить
  4. В заголовке используется картинка фотошопная)
    У Гугла мало кириллических шрифтов(пока),но ведь можно использовать любой с помощью библиотеки Cufon .Вот здесь есть толковая инструкция

    ОтветитьУдалить
  5. Ссылка выдает "Ошибка 404 — Не найдено". Регистрация нужна обязательно?

    ОтветитьУдалить
  6. Сайт кто-то взломал )
    Вот здесь http://n-wp.ru/5878 то же самое

    ОтветитьУдалить