Как изменить любой шрифт в теме WordPress

Вы хотите изменить шрифты на сайте WordPress. Если тема уже содержит настройки типографики, это просто. Сложность возникает, когда нужный шрифт не входит в тему или нужный элемент не имеет опции для изменения.

Изменение настраиваемых шрифтов

Если тема дает базовую поддержку типов шрифтов, самый быстрый путь — добавить дополнительные шрифты через плагин Easy Google Fonts.

Порядок действий:

1. Перейдите в Плагины -> Добавить новый.
2. Найдите Easy Google Fonts.
3. Установите и активируйте плагин.
4. Откройте кастомайзер: Внешний вид -> Настроить.

5. Откройте раздел Типографика -> Типографика темы.

6. Разверните список шрифтов и выберите нужный шрифт.

Этот способ работает только для элементов, которые тема заранее сделала настраиваемыми. Если элемент не доступен в настройках, дальше нужно работать с CSS.

Важно: перед изменениями сделайте резервную копию сайта или экспортируйте настройки темы.

Установите расширения для браузера

Чтобы быстро находить шрифты и селекторы, установите два расширения для Google Chrome.

1. WhatFont — определяет шрифт на странице при наведении курсора.

Запустите WhatFont и наведите курсор на текст, чтобы увидеть имя шрифта.

2. Firebug Lite — лёгкий инспектор, который показывает CSS и позволяет править стили в реальном времени.

Оба расширения упрощают поиск селекторов и проверку изменений без постоянной правки исходных файлов.

Найдите шрифт и селектор

Чтобы узнать, какой шрифт использует тема, и где он задан в CSS:

1. Включите WhatFont и наведите на нужный текст. Запишите точное имя шрифта.

2. Откройте кастомайзер и включите Firebug Lite (иконка с багом и отверткой).

3. В Firebug переключитесь на вкладку CSS.

4. В списке файлов выберите style.css или основной файл стилей темы.

5. Нажмите Ctrl+F и найдите имя шрифта, которое вы записали.

6. В результатах найдите селектор, в котором указан font-family. Скопируйте сам селектор.

Если вы видите несколько совпадений, начните с того селектора, который описывает именно тот элемент, который хотите изменить: заголовок, меню, кнопка и т. п.

Примечание: работайте осторожно с CSS. Ошибки в селекторах или свойствах могут повлиять на внешний вид. Если вы не уверены, сначала применяйте изменения в режиме предварительного просмотра.

Создайте контроллер шрифта в Easy Google Fonts

Контроллеры шрифтов в плагине говорят, где применять выбранный шрифт. Процесс:

1. В админке WordPress перейдите Настройки -> Google Fonts.
2. Нажмите Создать новый контроллер шрифта.

3. Дайте ему имя, которое отражает место на сайте (например, «Заголовки блога»).
4. Вставьте скопированный селектор в поле CSS selectors.
5. Включите опцию Force styles override, чтобы переопределить существующие правила.
6. Сохраните контроллер.

После этого в кастомайзере в списке шрифтов для этого контроллера появится нужный выбор. Выберите шрифт и убедитесь, что в превью он применяется.

Если изменение не сработало, попробуйте другой селектор из списка совпадений в style.css или добавьте более специфичный селектор. Часто приходится экспериментировать.

Быстрые шаблоны селекторов и пример CSS

Ниже несколько готовых примеров селекторов, которые часто встречаются в темах. Подставьте нужный селектор в контроллер или используйте его в пользовательском CSS.

/* Заголовки статей */
.entry-title, .post-title, h1.post-title {
  font-family: 'Open Sans', sans-serif !important;
}

/* Тело статьи */
.entry-content, .post-content, .content-area {
  font-family: 'Merriweather', serif !important;
}

/* Меню */
.main-navigation a, .nav-menu li a {
  font-family: 'Roboto', sans-serif !important;
}

/* Кнопки */
.button, .btn, .wp-block-button__link {
  font-family: 'Montserrat', sans-serif !important;
}

Используйте «!important» только когда действительно нужно переопределить сильные правила темы. Частое применение может усложнить дальнейшую поддержку.

Альтернативные подходы

1. Подключение Google Fonts вручную. Если вы знаете имя шрифта, добавьте link в head через функцию wp_enqueue_style в functions.php или через плагин для вставки кода.

2. Использовать @font-face и хранить файлы шрифтов локально. Это увеличивает контроль, но требует лицензии и настройки форматов.

3. Плагин Custom CSS или встроенная секция Дополнительные стили в кастомайзере — быстрый способ вставить правило для конкретного селектора.

4. Если вы создаете дочернюю тему, внесите правки в style.css дочерней темы. Это наиболее устойчивый вариант при обновлениях.

Когда выбирать метод:

• Хотите быстро — Easy Google Fonts или кастомный CSS в кастомайзере.
• Нужен максимальный контроль и производительность — локальные шрифты и дочерняя тема.

Когда метод не сработает и обходные пути

• Тема использует инлайн-стили с высокой специфичностью. Решение: сделать селектор более специфичным или использовать !important.
• Шрифт подключен через JavaScript и динамически применяется. Решение: найти место подключения в теме или плагине и изменить там.
• Кэширование и оптимизация шрифтов (плагины кеширования). Очистите кеш браузера и плагинов, отключите оптимизацию на время теста.
• Лицензии на коммерческие шрифты. Тогда используйте локальное размещение лишь при наличии прав.

Чек-листы по ролям

Администратор сайта:

• Сделать полную резервную копию сайта.
• Установить Easy Google Fonts и расширения браузера.
• Тестировать изменения в режиме предварительного просмотра.
• Очистить кеш после изменений.

Дизайнер:

• Подготовить списки нужных шрифтов и вариаций (начертания, размеры).
• Проверить доступность и контрастность для читабельности.
• Убедиться, что шрифт поддерживает нужный набор символов (кириллица, специальные символы).

Разработчик:

• Проверить влияние на производительность и FOUT/FOIT.
• При необходимости реализовать локальную подгрузку шрифтов через wp_enqueue_style.
• Прописать резервные семейства шрифтов в font-family.

Мини-методология: быстрая последовательность

1. Определите, доступна ли настройка в кастомайзере.
2. Если да — поменяйте через кастомайзер.
3. Если нет — включите WhatFont и Firebug Lite.
4. Найдите селектор в style.css.
5. Создайте контроллер в Easy Google Fonts или добавьте правило в кастомный CSS.
6. Очистите кеш и проверьте на нескольких устройствах.

Критерии приёмки

• Выбранный шрифт отображается в браузере без ошибок.
• Внешний вид элементов соответствует макету или требованиям дизайна.
• Нет визуальных регрессий на других страницах.
• Скорость загрузки страницы не ухудшилась критически.

Краткий глоссарий

• Селектор — часть CSS, указывающая, к каким элементам применяются стили.
• font-family — свойство CSS, задающее семейство шрифтов.
• Контроллер шрифта — запись в плагине, связывающая селектор с выбором шрифта.

Диаграмма принятия решения

flowchart TD
  A[Нужно изменить шрифт?] --> B{Есть настройка в теме?}
  B -- Да --> C[Поменять через кастомайзер]
  B -- Нет --> D[Установить WhatFont и Firebug Lite]
  D --> E[Найти селектор в style.css]
  E --> F{Можно создать контроллер?}
  F -- Да --> G[Создать контроллер в Easy Google Fonts]
  F -- Нет --> H[Добавить правило в дочернюю тему или Custom CSS]
  G --> I[Проверить и очистить кеш]
  H --> I
  I --> J[Тест на всех устройствах]

Заключение

Изменение шрифта в теме WordPress часто занимает несколько шагов: найти шрифт и селектор, выбрать подходящий инструмент и корректно применить правило. Easy Google Fonts упрощает задачу, но для нестандартных случаев потребуется инспекция CSS и понимание специфичности селекторов. Работайте аккуратно, делайте резервные копии и проверяйте результат на разных устройствах.

Важно: всегда проверяйте поддержку кириллицы, лицензионные ограничения и влияние на производительность.

Сводка ключевых шагов:

• Попробуйте кастомайзер и Easy Google Fonts.
• Используйте WhatFont и Firebug Lite для поиска селекторов.
• Создайте контроллер или добавьте CSS в дочернюю тему.
• Тестируйте и очистите кеш.