Как вставить шрифты Google в свой блог?
Шрифты от Google API - это отличная возможность дать вашему блогу новый и безупречный стиль. На данный момент в наборе есть 501 шрифт, из которых 35 - поддерживают кириллицу. Главное при выборе шрифта - это читаемость и совместимость с остальным блогом.
Настройка
Для примера - я выбрал шрифт "Marck Script".
1. Зайдите в каталог и выберите себе шрифт. Весь каталог шрифтов вы можете найти здесь: google.com/webfonts
2. После выбора шрифта перейдите по ссылке: Quick-use, которая находиться в том же ряду что и сам шрифт.
2.1 Теперь вы на странице настройки шрифта. В втором пункте - вы увидите:
Choose the character sets you want:
Latin (latin)
Latin Extended (latin-ext)
Cyrillic (cyrillic)
Выберите "Latin" и "Cyrillic". Остальные варианты советую не выбирать, так как в этом случае страница будет долго грузиться, а иногда шрифт просто не будет работать.
3. В третьем пункте вы увидите код который нужно будет вставить в блог, но после небольшой доработки. К примеру для моего шрифта - предназначен этот код:
Данный код должен быть обязательно изменён для его правильной работы в блоге.
<link href='http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
3.1 Добавьте "/" в конце кода перед ">", а также если в вашем коде есть этот символ - "&" вместо него поставьте "&".
<link href='http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'/>
Установка
1. Зайдите на свой аккаунт в blogger.com.
Далее зайдите в Дизайн ---> Изменить HTML
2. С помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:
<head>
3. После неё добавьте код шрифта и сохраните шаблон.
Использование
Вы можете использовать установленный шрифт в любом месте в вашем блоге. К примеру если вы желаете чтобы "название сайта" имело этот шрифт, тогда вам надо:
1. Зайти в Дизайн ---> Изменить HTML
2. С помощью поиска (Ctrl+F) найти эту строку в вашем шаблоне:
header h1
2.1 Далее вам нужно будет добавить или изменить строку "font-family". К примеру у меня данный код выглядит так:
#header h1 {
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.1em;
font-family:Marck Script, Georgia, serif;
}
2.2 Если в вашем коде "header h1" нет строки font-family тогда добавьте её:
font-family:Marck Script, Georgia, serif;
2.2.1 Вместо "Marck Script" - поставьте название вашего шрифта. Название можно узнать на странице шрифта, в четвёртом пункте.
2.3 Вот и всё. Также можете попробовать добавить шрифт и в другие место в вашем блоге, к примеру в "sidebar", "post-body" или "post h2".
Комментариев нет:
Отправить комментарий