Добавление шрифта состоит из трёх шагов:
- Получить ссылки на шрифт с сайта fonts.google.com
- Вставить в код сайта полученные ссылки
- Присвоить шрифт тексту в стилях CSS
Существует немало плагинов, чтобы добавить шрифты Google на WordPress. Но в студии мы придерживаемся правила: «Если есть возможность не использовать плагины — не используем». Поэтому в статье рассмотрим способ добавления шрифтов без плагинов.
Шаг 1. Выбираем шрифт
Выбираем необходимые шрифты на fonts.google.com и добавляем их в избранное. В окошке справа появится код для вставки на сайт. По сути мы получаем две ссылки: одна на сайт со шрифтами, другая на выбранный шрифт.
Получаем ссылку на шрифт Google Fonts
Шаг 2. Добавляем шрифт на сайт
Подключаем шрифт к сайту: вставляем код с полученными ссылками в head.
Код вставляем в functions.php дочерней темы.
Шаг 3. Присваиваем тексту новый шрифт
Используем css-свойство font-family
, которое устанавливает шрифт, используемый для оформления текста.
Для примера возьмём первую строчку из песни Чиж и Ко «О любви». Обернём её в тег span
с классом song-text
:
<span class="song-text">А не спеть ли мне песню?</span>
А классу
song-text
пропишем свойства:
Стили можно добавить в редакторе 'Консоль > Внешний вид > Настроить > Дополнительные стили'
А не спеть ли мне песню?
Результат работы подключённого шрифта
Поделиться
Поделиться
Отправить
Вотсапнуть
Твитнуть