Как изменить размер шрифта в WordPress: Gutenberg, плагины, CSS и настройщик темы

Изменение размера шрифта в WordPress означает настройку типографской шкалы текстовых элементов вашего сайта — заголовков, основного текста, подписей и навигационных меток — на уровне блока, темы или глобально через CSS. Выбранный метод определяет область применения изменений: отдельный абзац, тип контента на всех страницах или каждый текстовый элемент на всём сайте.

Это руководство охватывает все практические методы, доступные в современной установке WordPress, включая блочный редактор Gutenberg, плагины типографики, встроенный Theme Customizer и прямые переопределения CSS. Каждый подход имеет свой конкретный сценарий использования, и выбор неподходящего метода создаёт технический долг, который накапливается со временем.

Почему решения о размере шрифта более технически сложны, чем кажется

Типографика — это не косметическая проблема. Размер шрифта напрямую влияет на показатели Core Web Vitals, в частности на метрику Cumulative Layout Shift (CLS) при асинхронной загрузке шрифтов и на Largest Contentful Paint (LCP), когда крупный текст заголовка является основным элементом области просмотра. Плохо ограниченные правила font-size — например, применение font-size к элементу body без учёта наследования на основе em — непредсказуемо каскадируются через дочерние элементы, нарушая отступы, соотношения межстрочного интервала и макеты компонентов.

Если вы запускаете WordPress в среде VPS Хостинга с root-доступом, у вас есть дополнительная возможность редактировать файлы темы напрямую и управлять слоями кэширования, влияющими на то, как изменения CSS распространяются до конечных пользователей. Такой уровень контроля недоступен на общей инфраструктуре, что делает выбор метода ещё более важным.

Сравнение: все четыре метода на первый взгляд

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

Метод 1: Блочный редактор Gutenberg

Блочный редактор Gutenberg, представленный в WordPress 5.0, управляет размером шрифта на уровне отдельного блока. Это правильный подход, когда вам нужно изменить размер конкретного абзаца, заголовка или группы элементов, не затрагивая глобальные стили.

Пошаговая инструкция: настройка размера шрифта в блоке

1. Войдите в панель управления WordPress и откройте запись или страницу, которую хотите отредактировать.
2. Нажмите на текстовый блок, который хотите изменить — как правило, это блок Абзац, Заголовок или Список.
3. На правой боковой панели найдите вкладку Блок (не вкладку Документ). Если боковая панель скрыта, нажмите значок шестерёнки в правом верхнем углу панели инструментов, чтобы её отобразить.
4. Прокрутите вниз до раздела Типографика в панели настроек блока.
5. Вы увидите предустановленные варианты размера: Маленький, Средний, Большой и Очень большой. Эти значения определяются файлом theme.json вашей активной темы.
6. Чтобы задать точное значение, нажмите Пользовательский и введите размер в пикселях (например, 18px) или используйте относительные единицы, такие как rem (например, 1.125rem).
7. Нажмите Обновить или Опубликовать для сохранения.

Использование theme.json для определения пользовательских предустановок (WordPress 5.8+)

Если вы управляете блочной темой или классической темой с файлом theme.json, вы можете определить точные предустановленные размеры, которые отображаются в боковой панели редактора. Это наиболее удобный для сопровождения подход для сред разработки.

{
  "settings": {
    "typography": {
      "fontSizes": [
        { "name": "Small", "slug": "small", "size": "14px" },
        { "name": "Regular", "slug": "regular", "size": "16px" },
        { "name": "Large", "slug": "large", "size": "22px" },
        { "name": "Extra Large", "slug": "x-large", "size": "32px" }
      ]
    }
  }
}

Размещение этого файла в корневом каталоге вашей дочерней темы гарантирует, что предустановки сохранятся после обновлений темы и будут доступны каждому редактору на сайте без необходимости знания CSS.

Граничный случай: конфликт размера шрифта на уровне блока и глобальных стилей

Распространённая проблема возникает, когда для блока задан явный размер шрифта через редактор, но глобальная таблица стилей темы также нацелена на тот же элемент с правилом более высокой специфичности CSS. Блочный редактор вставляет встроенные стили вида style="font-size:22px", которые обычно переопределяют большинство правил таблицы стилей. Однако если тема использует объявления !important в своём CSS, встроенный стиль проигрывает. Всегда проверяйте отрисованный элемент в DevTools браузера, чтобы убедиться, какое правило применяется.

Метод 2: Плагины типографики

Плагины — правильный выбор, когда вам нужен общесайтовый типографский контроль без ручного написания CSS. Они особенно полезны для не-разработчиков, управляющих сайтами на управляемом хостинге или VPS с cPanel, где прямой доступ к файлам менее распространён.

Рекомендуемый плагин: Easy Google Fonts

Easy Google Fonts интегрируется непосредственно с WordPress Customizer и предоставляет контроль над размером шрифта для каждого элемента на всём сайте.

Установка и настройка:

1. В панели управления WordPress перейдите в Плагины > Добавить новый.
2. Найдите Easy Google Fonts и нажмите Установить сейчас, затем Активировать.
3. Перейдите в Внешний вид > Настроить.
4. Выберите Типографика в меню Customizer.
5. Выберите элемент, который хотите изменить: Основной текст, Заголовки (H1–H6), Абзацы или любой пользовательский селектор, который вы определите.
6. Используйте ползунок Размер шрифта или поле ввода для задания значения.
7. Нажмите Опубликовать, чтобы применить изменения.

Альтернативный плагин: Fonts Plugin | Google Fonts Typography

Этот плагин предлагает более детальный интерфейс и поддерживает вариативные шрифты, которые становятся всё более актуальными для сайтов, оптимизированных по производительности. Вариативные шрифты сокращают количество HTTP-запросов, предоставляя единый файл шрифта, охватывающий несколько начертаний и стилей.

Важное предупреждение: конфликты плагинов с блочными темами

Если вы используете блочную тему с Full Site Editing (FSE) (например, Twenty Twenty-Three или Twenty Twenty-Four), плагины типографики, которые вставляют CSS в <head> через wp_enqueue_style, могут конфликтовать с глобальными стилями темы, определёнными в theme.json. Результатом становятся непредсказуемые конфликты специфичности. В средах FSE используйте Редактор сайта (Внешний вид > Редактор) для глобальных изменений типографики вместо плагина.

Метод 3: Theme Customizer

WordPress Theme Customizer (Appearance > Customize) — это встроенный интерфейс для внесения изменений на уровне темы. Не все темы предоставляют здесь элементы управления типографикой — это полностью зависит от того, что разработчик темы зарегистрировал с помощью WordPress Customizer API.

Пошаговая инструкция: настройка размера шрифта через Customizer

1. Перейдите в Внешний вид > Настроить в панели управления WordPress.
2. Найдите раздел Типографика, Шрифты или Текст на левой панели. Если такого раздела нет, ваша тема не поддерживает это нативно.
3. Выберите тип элемента: основной текст, H1, H2, навигация, подвал и т.д.
4. Настройте размер шрифта с помощью предоставленного ползунка или числового поля ввода.
5. Предварительный просмотр справа обновляется в режиме реального времени.
6. Нажмите Опубликовать, чтобы сохранить изменения.

Важное ограничение: настройки Theme Customizer не переносимы

Настройки Customizer хранятся в базе данных WordPress как модификации темы (theme_mods). При смене темы все изменения размера шрифта, сделанные через Customizer, будут потеряны. Они также не переносятся с помощью стандартных инструментов экспорта, если только вы не используете плагин, специально разработанный для миграции данных Customizer. Это критически важное соображение при планировании миграции темы на рабочих сайтах.

Метод 4: Пользовательский CSS

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

Добавление CSS через Customizer (без редактирования файлов)

1. Перейдите в Внешний вид > Настроить > Дополнительный CSS.
2. Введите ваши правила CSS непосредственно в редакторе.
3. Нажмите Опубликовать.

Этот подход хранит CSS в базе данных и безопасен для не-разработчиков. Однако он имеет ограничение по размеру и не поддерживает препроцессоры, такие как Sass.

Нацеливание на конкретные элементы с помощью CSS

/* Set base body font size */
body {
  font-size: 17px;
  line-height: 1.7;
}

/* Override heading sizes */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Target a specific Gutenberg block class */
.wp-block-paragraph.is-style-lead {
  font-size: 1.25rem;
}

Адаптивный размер шрифта с clamp()

Современный CSS поддерживает плавную типографику с помощью функции clamp(), которая устраняет необходимость в нескольких контрольных точках медиазапросов:

body {
  font-size: clamp(15px, 1.5vw, 18px);
}

h1 {
  font-size: clamp(28px, 5vw, 56px);
}

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

Прямое редактирование файлов темы (требуется дочерняя тема)

Если вам нужно постоянно добавить CSS в таблицу стилей темы и избежать накладных расходов базы данных поля Additional CSS, добавьте правила в файл style.css вашей дочерней темы. Никогда не редактируйте файлы родительской темы напрямую — обновления перезапишут ваши изменения.

На сервере с SSH-доступом вы можете редактировать файл напрямую:

nano /var/www/html/wp-content/themes/your-child-theme/style.css

После сохранения очистите кэш на стороне сервера и любой кэш CDN, чтобы убедиться, что обновлённые стили доставляются посетителям. В среде VPS Хостинга это обычно означает выполнение команды сброса кэша для вашего плагина кэширования или обратного прокси (Nginx, Varnish и т.д.).

Ошибки специфичности, которых следует избегать

• Избегайте !important как стандартного решения. Это создаёт гонку специфичности, которая делает дальнейшее сопровождение крайне сложным.
• Не задавайте размеры шрифта в пикселях для элемента html, если ваша тема использует размеры на основе em. Изменение html { font-size: 20px; } масштабирует каждое значение на основе em по всему сайту, часто нарушая отступы и макет.
• Используйте единицы rem для масштабируемости. Значения rem относительны к корневому элементу html, что делает их предсказуемыми и доступными. Пользователи, увеличивающие размер шрифта по умолчанию в браузере, получат преимущество от макетов на основе rem, что является требованием доступности WCAG.

Доступность и размер шрифта: что оценивает Google

Аудит Google Lighthouse отмечает слишком мелкий для чтения текст как проблему удобства использования. Минимальный рекомендуемый размер шрифта основного текста составляет 16px для десктопа и 14px для мобильных устройств, хотя 16px для всех областей просмотра является более безопасным базовым значением. Критерий успеха WCAG 2.1 1.4.4 требует, чтобы текст можно было увеличить до 200% без потери содержимого или функциональности — требование, которое единицы rem и em удовлетворяют по умолчанию, тогда как макеты только с px часто не соответствуют ему.

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

Соображения по кэшированию и развёртыванию на VPS

Когда вы изменяете CSS на сайте WordPress, размещённом в среде VPS Хостинга или Выделенных серверов, изменения могут быть не сразу видны из-за нескольких слоёв кэширования:

• Объектный кэш WordPress (Redis, Memcached)
• Плагины кэширования страниц (WP Rocket, W3 Total Cache, LiteSpeed Cache)
• Кэш Nginx FastCGI
• Кэш CDN на граничных серверах (Cloudflare, BunnyCDN)

После внесения любых изменений размера шрифта последовательно очищайте все активные кэши — сначала кэш плагина, затем кэш на уровне сервера, затем CDN. Несоблюдение этого правила является наиболее распространённой причиной, по которой разработчики сообщают, что изменения CSS «не работают».

Для ручного сброса кэша Nginx FastCGI на Linux VPS:

sudo rm -rf /var/cache/nginx/*
sudo systemctl reload nginx

Для LiteSpeed Cache через WP-CLI:

wp litespeed-purge all

Практический контрольный список для принятия решений

Используйте этот контрольный список для выбора правильного метода в вашей ситуации:

• Изменение одного абзаца или заголовка на отдельной странице — Используйте панель Типографика блочного редактора Gutenberg.
• Изменение размера шрифта для всего основного текста или всех заголовков на всём сайте — Используйте плагин типографики или Theme Customizer, если ваша тема это поддерживает.
• Использование блочной темы Full Site Editing — Используйте Редактор сайта (Внешний вид > Редактор > Стили) и предустановки theme.json.
• Нужна адаптивная, плавная типографика — Напишите пользовательский CSS с использованием clamp() в таблице стилей дочерней темы или в Additional CSS.
• Нужно, чтобы изменения сохранялись после обновлений темы — Используйте дочернюю тему, плагин или theme.json в пользовательской блочной теме.
• Требуется соответствие требованиям доступности — Используйте единицы rem или em; избегайте объявлений только с px для основного текста.
• Изменения не отображаются после редактирования — Очистите все слои кэширования: плагин, сервер и CDN.
• Конфликт между блочным редактором и стилями темы — Проверьте элемент в DevTools браузера, определите применяемое правило CSS и соответствующим образом скорректируйте специфичность.

FAQ

Какая единица лучше всего подходит для размеров шрифта в WordPress: px, em или rem?

rem — рекомендуемая единица для размеров шрифта в WordPress. Она относительна к корневому элементу html, что делает её предсказуемой в вложенных компонентах и изначально доступной — предпочтения пользователя по размеру шрифта на уровне браузера учитываются автоматически. Используйте px только для фиксированных декоративных элементов, где масштабирование нежелательно.

Почему изменение размера шрифта в редакторе Gutenberg не отображается на фронтенде?

Наиболее распространённые причины: слой кэширования отдаёт устаревшую версию страницы, правило таблицы стилей темы с более высокой специфичностью CSS переопределяет встроенный стиль блока, или плагин типографики глобально сбрасывает размеры шрифта. Откройте страницу в режиме инкогнито и проверьте элемент в DevTools, чтобы определить причину.

Можно ли изменить размеры шрифта в WordPress без плагина или написания кода?

Да. Панель Типографика блочного редактора Gutenberg позволяет изменять размер шрифта для каждого блока без написания кода. Theme Customizer также предоставляет элементы управления размером шрифта, если ваша активная тема их регистрирует. Ни один из подходов не требует установки плагина или знания CSS.

Повлияет ли изменение размеров шрифта в Theme Customizer на мой сайт после обновления темы?

Сами настройки хранятся в базе данных WordPress и не будут удалены при обновлении темы. Однако если обновление темы изменит базовую структуру CSS или удалит опцию Customizer, управлявшую размером шрифта, визуальный результат может измениться. Использование дочерней темы и пользовательского CSS более устойчиво к изменениям в исходной теме.

Как задать разные размеры шрифта для мобильных устройств и десктопа в WordPress?

Используйте медиазапросы CSS в панели Additional CSS или в таблице стилей дочерней темы, либо используйте функцию clamp() для плавного масштабирования. Блочный редактор Gutenberg также поддерживает настройки типографики для каждой контрольной точки в некоторых темах через конфигурацию theme.json layout, хотя эта функция зависит от уровня реализации темы.