Как изменить и добавить разные шрифты на сайт WordPress

В этой статье вы узнаете как изменить и добавить разные шрифты на сайт WordPress по технологии рекомендуемой разработчиками

То есть, ваш сайт будет работать так же быстро, но с разными шрифтами. И без всяких плагинов 😎

Сами шрифты мы будем брать из гугл-сервиса Google Fonts

Простая инструкция с пошаговыми действиями специально для вас

1. Ищем нужные шрифты на сайте Google Fonts

  1. Заходим на сайт Google Fonts (ссылка кликабельная)
  2. Выбираем шрифты. Так как наш сайт на русском языке, нужно выбрать кириллические шрифты. Для этого нажимаем сверху кнопку «Language» и выбираем «Сyrillic»

3. Нажимаете на любой понравившийся шрифт. Я выбрал Roboto. Кстати, текст этой статьи написан этим шрифтом! 😛 Прокручиваете вниз страницу с выбранным шрифтом и выбираете стили, нажав на кнопку «Select…» справа. Я выбрал несколько стилей:

Справа отобразится окно с выбранными стилями. Для того чтобы показать, как добавить разные шрифты на сайт WordPress, я выберу еще один шрифт, например «Rubik Bubbles»:

Обратите внимание, что в выделенном фрагменте в html-коде уже отобразились несколько шрифтов

4. Нажимаем кнопку «@import» сверху от кода. Пока больше ничего не делаем. Чуть позже, нам нужно будет скопировать часть кода, начиная от https:// и заканчивая display=swap, точно как выделено на скриншоте:

Сейчас ничего копировать не нужно. Код под «CSS rules to specify families» нам также потом понадобится. На этом первый этап завершен.

2. Встраиваем шрифты в код сайта

1. Открываем админку WordPress’а -> Внешний вид -> Редактор тем

2. Справа нажимаем на файл functions.php, он у вас точно есть:

3. Листаем в самый низ файла и вставляем туда данный код:

function wpblog_add_google_fonts() {
  wp_enqueue_style( 'wpblog_google_fonts', 'ссылка с Google Fonts', false );
} 
add_action( 'wp_enqueue_scripts', 'wpblog_add_google_fonts' );

Примерно так:

4. Вместо «ссылка с Google Fonts» нужно вставить ту самую ссылку из прошлого этапа:

Примерный результат:

Поздравляю! Мы только что встроили в наш сайт несколько шрифтов, которые уже можем использовать 😎

3. Изменяем старый шрифт на новый в любом элементе вашего сайта

1. Для того чтобы выбрать любой элемент на сайте и его изменить, нужно узнать его класс, отвечающий за шрифт. О том как это сделать я показывал в другой статье, вот ссылка на точную инструкцию. Скопируйте код этого класса, где задан шрифт.

Для примера, чтобы было понятно, я хочу изменить шрифт заголовка на главной странице сайта. Вот такой исходный код я нашел:

«.title a» — это класс, отвечающий за заголовок. У вас он может называться совершенно по другому

А «font-family:..» это и есть CSS-стиль отвечающий за шрифт. Копируем полностью весь класс с этим стилем

2. Заходим в админке в «Настройки стилей». В пользовательском CSS в пустое место вставляем скопированный код:

Теперь возвращаемся на страницу сайта Google Fonts. Копируем код под «CSS rules to specify families», в зависимости от того, какой шрифт вам нужно поставить, Я выбрал «Rubik Bubbles»:

3. Вставляем этот новый стиль «font-family» и заменяем им старый. Кликаем «Опубликовать» сверху:

4. Обновляем страницу и видим результат:

Таким образом, мы научились добавлять несколько разных шрифтов на сайт по рекомендации разработчиков сайта 😯 и изменять шрифт его любых элементов. Круто же!

Увидимся в следующих статьях!

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *