Как в WordPress поменять шрифт на сайте

WordPressMan 07.06.2017 Уроки WordPress Leave a comment

Здравствуйте, друзья! Знания, полученные в этом уроке, помогут вам поменять шрифты на сайте, управляемом CMS WordPress. Ниже я расскажу, как установить на сайте понравившийся шрифт с популярного сервиса Google Fonts (надежного, удобного, с огромным диапазоном разномастных шрифтов). Итак, начнем!

Алгоритм подключения к сайту шрифта с сервиса Google Fonts

Выберите шрифт, который будете устанавливать на блог (сайт). Перейдите для этого на сайт Google Fonts и в фильтре бокового меню (справа) выберите Cyrillic в выпадающем списке All Languages блока Languages. При необходимости с помощью фильтра отсортируйте шрифты по типу, размеру и т.п.
Выберите шрифт и нажмите знак «+» в красном кружке, расположенный в строке с названием шрифта, справа.
В появившемся окне на вкладке Customize отметьте «птичками» чек-боксы у нужных подтипов выбранного шрифта. Не забудьте поставить «птичку» рядом с латинским набором шрифта – английские слова и фразы в интернете распространены и встречаются на многих сайтах. Уверен, ваш – не исключение.
На вкладке Embed выберите способ подключения шрифта к сайту.
При выборе варианта Standart скопируйте код верхней строки и вставьте его в код шапки сайта. Для этого через раздел Внешний вид админки вашего сайта перейдите в подраздел Редактор. Найдите в списке справа пункт Заголовок (header.php) и кликните его. Вставьте скопированную на Google Fonts строчку перед тегом </head>. В нашем примере это выглядит так:
При выборе варианта @import скопируйте код верхней строки и также вставьте его в файл header.php перед тегом </head>.
Чтобы шрифт начал отображаться на сайте, добавьте к CSS-свойствам (идентификаторам, классам) нужных элементов код, находящийся в нижней строке вкладки Standart сервиса Google Fonts. Например, чтобы изменить шрифт заголовка h1, добавьте (или замените, если установлен другой шрифт), следующий код:

h1 { font-family: 'Roboto', sans-serif; }

1
2
3

h1 {
font-family: 'Roboto', sans-serif;
}