Web-шрифты для блога

Здравствуйте, дорогие друзья, читатели и гости блога. Расскажу подробнее, как можно установить нестандартный кириллический шрифт непосредственно в блоггере. Сейчас очень многие стали их использовать для оформления блога.

Несмотря на то, что Блоггер дал нам свой набор шрифтов с некоторыми настройками, всёравно прибегаем к каким-то другим способам, чтобы разнообразить текст.
Разберём подробно, как с помощью бесплатного сервиса Google Web Fonts установить свой уникальный шрифт для блога.

Перейдите по ссылке https://fonts.google.com/ и рассмотрим, что мы имеем.

Для начала нам необходима выбрать кириллицу. Затем, с помощью фильтров подбираем шрифты, которые поддерживают кириллицу. Их достаточно много. Поэтому не торопитесь с выбором, есть очень необычные.  Обратите внимание на кнопочки внизу справа. Нажимаем на первую и получаем различные стили шрифта. Здесь тоже выбор большой. Когда уже наконец определились, что нам нужно, нажимаем на среднюю иконку. Попадаем на такую страницу.

Вот перед нами все стили, которые выбрали. На скриншоте я выделила рамкой предупреждение о том, что использование множества стилей тормозит загрузку сайта. Так что не стоит этим злоупотреблять. Наконец, отмечаем нужный нам шрифт и ниже копируем полученный код. И под ним  есть название шрифта в стилях CSS. Это нам тоже пригодится.

Лучше будет если скопированный код вы сначала вставите в блокнот. Необходимо будет сделать небольшие, но важные изменения. Так как в таком виде шаблон блоггер не примет его и выдаст ошибку.

Допустим, код у меня такой.

<link href='http://fonts.googleapis.com/css?family=Lobster&subset=cyrillic' rel='stylesheet' type='text/css'>
Мы должны в конце его добавить слеш -вот такую наклонную черту / и удалить  знак амперсанда &, оставив вместо него пробел. Сейчас мы имеем вот что.

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

Всё. Идём во вкладку шаблон (сделайте резервную копию) и находим закрывающийся тег </head> и сразу над ним устанавливаем его. На снимке ниже я ещё раз отметила стрелочками те места, которые нужно подкорректировать.

Теперь как раз о тех стилях CSS, что я упоминала выше. Мы должны определиться где мы хотим применить этот шрифт. Вообще, для всей страницы в целом, а это значит что  текст сообщения, гаджетов, комментариев будет выглядеть таким образом. Или в каком-то другом месте. Для этого находим заветную строку ]]></b:skin> и над ней вставляем следующий код.
В зависимости от вашего выбора.

1.Для всей страницы

body {
font-family: 'PT Sans', sans-serif; /здесь ваш код/
}

У меня получился вот такой шрифт.

2.Для заголовков.

h3.post-title {
 font-family: 'PT Sans', sans-serif;
}

Если вы меняли теги заголовков , то пробуйте h1 или  h2, если предложенный не даёт изменений.

3.Для цитаты.

.post blockquote {
font-family: 'PT Sans', sans-serif;
}

Так как эти шрифты установлены напрямую в блоге они так и будут отображаться на другом компьютере.

На этом сегодня закончу. Если возникнут вопросы, спрашивайте. Разберёмся. До встречи.

оформите подписку на новые шпаргалки

Введите Ваш email