Шрифты играют важную роль в визуальном оформлении сайта, влияя на его уникальный стиль и восприятие пользователей. Для WordPress смена шрифтов — это простая задача, которую можно выполнить без технических знаний. Но это только в том случае, если мы прибегнем к плагинам. А если мы пойдем на техническую работу, тогда будет немного сложно. В этой статье мы рассмотрим все способы, как изменить шрифты на вашем сайте WordPress, чтобы придать ему новый и свежий вид.
Темы с настраиваемыми шрифтами
Многие темы WordPress предоставляют возможность настройки шрифтов напрямую из панели админа. При выборе темы обратите внимание на раздел «Настройки шрифтов» или «Типографика», где вы сможете выбрать шрифты для заголовков, текста и других элементов.
Для примера можете ознакомиться с темой Zita из обзора лучших бесплатных тем для WordPress. Она как раз предоставляет такую возможность из коробки своих настроек. Свободный выбор любого шрифта и его размера.
Плагины для изменения шрифтов
Есть много плагинов, которые позволяют добавлять новые шрифты и изменять стили текста без необходимости редактирования кода. Просто установите и активируйте плагин, а затем настройте шрифты через его интерфейс. Вот несколько топовых плагинов, которые помогут это сделать.
Fonts Plugin
Этот плагин работает с Google Fonts через простой и интуитивный интерфейс, который позволяет вам легко выбирать и изменить шрифт для различных элементов вашего сайта. В платной версии становится доступный параметр «Размер шрифта».
WP Google Fonts
Этот плагин позволяет легко добавлять и управлять шрифтами из библиотеки Google. С его помощью вы можете легко выбрать шрифт для заголовков, текстов и других элементов вашего сайта.
Изменить шрифт без плагина
Давайте теперь рассмотрим, как без плагина изменить шрифт на сайте WordPress и его размер. Шрифты будем использовать из библиотеки Google Fonts. Если кто-то хочет применят свои шрифты, ознакомитесь со статьёй «нестандартные шрифты на сайте». Там как раз говорится о форматах шрифта и поддержки на разных устройствах.
Шаг 1: Выбор шрифта
Заходим в библиотеку Google, и определяемся с выбором шрифта. Далее нажмите на кнопку «+ Select style» рядом с выбранным шрифтом. Отметьте все вам необходимые стили шрифта, то есть его толщину (400, 500 и т.д.).
Шаг 2: Код Google Fonts
После выбора всех необходимых стилей, если не появилась боковая панель выбора, нажмите на значок «View Selected Families» в верхнем меню. Скопируйте код для подключения.
Шаг 3: Добавление кода
Первым делом подключим шрифт. Для этого откройте файл functions.php и поместите в него код, что ниже. Но только измените подключаемый шрифт.
//Подключение шрифта Google
function ws_load_google_fonts() {
wp_enqueue_style( 'ws-google-fonts', 'https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'ws_load_google_fonts' );
Шаг 4: Применение шрифта к элементам
Теперь нам нужно прописать стили шрифта, а точнее, размер (это по желанию) и семейство шрифта, которое вы выбрали. Оно было указано на втором шаге. Лучше всего стили прописывать в дочерней теме, но есть более-менее корректный вариант.
В панели управления WordPress зайдите в «Внешний вид — Настроить». В боковой панели найдите вкладку «Дополнительные стили». И в ней укажите следующие стили, но не забудьте изменить семейство шрифта на свое из «Шага 2» и нажмите кнопку «Опубликовать».
body {
font-family: 'Caveat', cursive;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Caveat', cursive;
}
p {
font-family: 'Caveat', cursive;
}
/* sidebar */
.widget-title {
font-family: 'Caveat', cursive;
}
/* head menu */
.main-navigation ul {
font-family: 'Caveat', cursive;
}
/* title post, page */
.page-title, .entry-title {
font-family: 'Caveat', cursive;
}
Заметка про размер шрифта
Размер шрифта изменяйте точно так же прямо во в этой вкладке для нужных элементов через свойство font-size.