Здравствуйте, друзья! Знания, полученные в этом уроке, помогут вам поменять шрифты на сайте, управляемом 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, добавьте (или замените, если установлен другой шрифт), следующий код:
123h1 {font-family: 'Roboto', sans-serif;}
Вот и все настройки – просто, согласитесь? Смена шрифта на сайте – дело пяти минут!
Важно! Не используйте оба способа подключения шрифта одновременно.
Если у вас не получилось, встретились проблемы или возникли вопросы по теме статьи – пишите в комментариях. Разберемся!