Как установить шрифты на Blogger

О том, как установить красивые шрифты в Блоггере — тема сегодняшней статьи. Способ установки, который опишу ниже, простой и доступный.

Меняем шрифт

Заходим на сайт гугл со шрифтами https://fonts.google.com/ 
Можно выбирать сразу несколько шрифтов, что бы в шаблоне была только одна строчка кода. Берём понравившиеся шрифты или один шрифт, отметив, что нужен нам кириллический. Добавляем шрифт(ы), нажимая на плюс или удаляем ненужные, нажимаем минус. Помните, чем больше шрифтов возьмёте, тем дольше будет загрузка вашего сайта. Ограничьтесь 2-3. Как только просмотрели и выбрали шрифт, кстати, их не много, нажимаем на чёрную полоску внизу сайта и всплывёт окно с кодами.
Лучше выбирать шрифты применив перевод, если не слишком хорошо владеете языком. А когда станете копировать коды, переключите перевод обратно.
копировать коды
1. Вот так примерно будет выглядеть ваш код:
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif&display=swap&subset=cyrillic" rel="stylesheet">
2. Второй код — нужен для добавления в стили css.
На сайте можно сделать некоторые настройки стилей шрифта:
настройки стилей шрифта
Теперь код нужно вставить в шаблон вашего блога строго сразу после тега <head>.
Но сперва требуется добавить к коду слеш /, перед закрывающимся тегом:
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif display=swap subset=cyrillic" rel="stylesheet"/>
И убрать вот такие значки из кода, вставив на их место пробел.
Поменять шрифт можно у заголовков виджетов, полностью текста поста, заголовка блога и так далее.
Выбираем что будем менять и добавляем CSS код выше тега ]]></b:skin>.

Применить шрифт можно к любому тексту на вашем сайте, например:
.post h3 (или .post-title ) - заголовок поста
.post-body - сообщения
.title - заголовок блога
.sidebar - виджеты
и так далее.

Пример кода для заголовка статьи

.post h3 {
font-family: 'IBM Plex Serif', serif;
}
Если нужно вставить шрифт только в текст статьи, то в редакторе блога, в режиме xtml добавляем код:
<div style="font-family: ''Marck Script', cursive;">Ваш текст</div>
На место моего шрифта Marck Script', cursive; добавить название своего.
Получится как то так:
Использовала шрифт Marck Script.
Отправить комментарий

Комментарии со спамом удаляются.