Добавить шрифт Google Fonts в WordPress / 2021

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Добавление шрифта состоит из трёх шагов:

  1. Получить ссылки на шрифт с сайта fonts.google.com
  2. Вставить в код сайта полученные ссылки
  3. Присвоить шрифт тексту в стилях CSS
Существует немало плагинов, чтобы добавить шрифты Google на WordPress. Но в студии мы придерживаемся правила: «Если есть возможность не использовать плагины — не используем». Поэтому в статье рассмотрим способ добавления шрифтов без плагинов.

Шаг 1. Выбираем шрифт

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

Получить ссылку на шрифт Google Fonts

Получаем ссылку на шрифт Google Fonts

Шаг 2. Добавляем шрифт на сайт

Подключаем шрифт к сайту: вставляем код с полученными ссылками в head.

Код вставляем в functions.php дочерней темы.

Шаг 3. Присваиваем тексту новый шрифт

Используем css-свойство font-family, которое устанавливает шрифт, используемый для оформления текста.

Для примера возьмём первую строчку из песни Чиж и Ко «О любви». Обернём её в тег span с классом song-text:

<span class="song-text">А не спеть ли мне песню?</span>
А классу song-text пропишем свойства:
Стили можно добавить в редакторе 'Консоль > Внешний вид > Настроить > Дополнительные стили'

А не спеть ли мне песню?

Результат работы подключённого шрифта
Поделиться
Отправить
Вотсапнуть