Skip to content

Всё для WordPress, веб-разработки — и не только

🔤 Пользовательские шрифты для сайта WordPress: пошаговое руководство 2026

🔤 Пользовательские шрифты для сайта WordPress: пошаговое руководство 2026

Шрифт по умолчанию выдаёт сайт на WordPress с первого взгляда. Системная гарнитура кричит «я ничего не настраивал» громче любого бесплатного шаблона.

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

Мы собрали работающие методы по состоянию на 2026 год. От самого неудачного, который до сих пор советуют в старых руководствах, до каноничного «пути WordPress».

💡 Быстрый обзор:

  • Выберите шрифт: Google Fonts (бесплатно, 1500+ гарнитур), Adobe Fonts (по подписке Creative Cloud) или загрузите собственный WOFF2 на сервер.
  • Решите, нужен ли плагин (проще, интерфейс в кастомайзере) или ручное подключение через functions.php (чище, быстрее, не зависит от стороннего кода).
  • Для ручного способа: пропишите wp_enqueue_style в functions.php и font-family в CSS.
  • Для плагина: установите EasyFonts или Use Any Font, выберите гарнитуру и сохраните.
  • Проверьте результат в разных браузерах и на мобильном: каждый дополнительный шрифт добавляет 50-200 КБ к загрузке страницы.

Зачем вообще менять шрифты на сайте

Шрифт формирует первое впечатление быстрее, чем цвета или картинки. Исследователи из Университета Мичигана ещё в 2008 году показали: текст, набранный сложным шрифтом, подсознательно воспринимается как «трудный». Читатель реже соглашается следовать инструкциям и переоценивает время на выполнение задачи.

С засечками или без, тоже важно. Гарнитуры с засечками (Georgia, Merriweather) увеличивают время чтения, но повышают восприятие авторитетности. Шрифты без засечек (Roboto, Inter) ускоряют чтение и лучше работают на мобильных экранах. Это не догадки: обзор исследований по психологии типографики подтверждает эффект на практике.

Для сайта на WordPress правильный шрифт решает три задачи:

  • Узнаваемость бренда. Шрифт заголовков уникален, сайт не выглядит как «ещё один блог на стандартной теме».
  • Читаемость. Правильный размер, высота строки и контраст снижают процент отказов.
  • Визуальная иерархия. Разные гарнитуры для заголовков и основного текста направляют взгляд посетителя.

А теперь к практике.

Где брать шрифты для WordPress

Источников три: Google Fonts, Adobe Fonts и самостоятельная загрузка. Разберём каждый.

Google Fonts, бесплатно и без регистрации

Самый очевидный источник. Более 1500 шрифтов, открытая лицензия, кеширование через CDN Google. Подходит для 95% сайтов.

Зайдите на fonts.google.com. Интерфейс встречает сеткой карточек с примером каждого шрифта.

Главная страница Google Fonts с сеткой шрифтов

Слева фильтры. Можно отобрать по категории (Serif, Sans Serif, Display, Handwriting, Monospace), языку, количеству начертаний и толщине. Фильтры срабатывают мгновенно, результат перестраивается без перезагрузки.

Наведите курсор на шрифт, появится меню для смены текста примера. Вбейте свой заголовок или абзац и посмотрите, как он выглядит.

Предпросмотр шрифта при наведении курсора в Google Fonts

Кликните «View specimen», откроется страница шрифта со всеми начертаниями, таблицей глифов и примерами в разных размерах.

Детальная страница шрифта в Google Fonts со всеми начертаниями

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

Панель коллекции выбранных шрифтов в Google Fonts

Раскройте панель коллекции, увидите вкладки «Embed» и «Customize».

Вкладка Embed с кодом для вставки шрифтов на сайт

На вкладке «Customize» выберите нужные начертания. Важно: не отмечайте всё подряд. Каждое начертание, это дополнительный файл, который грузит браузер. Для обычного сайта хватает Regular (400) и Bold (700), иногда Italic. Индикатор скорости в правом верхнем углу покажет, насколько шрифт замедлит загрузку.

Вкладка Customize для выбора начертаний шрифта в Google Fonts

Если сайт на языке с нелатинским алфавитом, выберите нужный набор символов внизу страницы. Для кириллицы это Cyrillic.

Выбор языкового набора символов для шрифта в Google Fonts

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

Кнопки поделиться коллекцией и скачать шрифты в Google Fonts

Adobe Fonts (бывший Typekit)

Если у вас есть подписка Creative Cloud, Adobe Fonts даёт доступ к профессиональным гарнитурам вроде Futura, Minion Pro и Myriad. Шрифты подключаются через CSS, аналогично Google Fonts. Бесплатный тариф Creative Cloud включает базовый набор, для большинства проектов хватает.

Собственные шрифты в WOFF2

Купили лицензионный шрифт или скачали свободный с Font Squirrel? Конвертируйте в WOFF2 (современный формат веб-шрифта, сжатие Brotli, поддерживается 97% браузеров) и загрузите на свой сервер. Плюс: не зависите от стороннего CDN и GDPR-совместимо. Минус: шрифт грузится с вашего сервера, а он заведомо медленнее Google CDN.

5 способов добавить пользовательские шрифты в WordPress

Способов ровно пять. Идём от «так делать не надо» к идеальному WordPress-методу.

Способ 1: CSS @import, не делайте так

Google Fonts предлагает вкладку @import с готовой CSS-строкой. Выглядит удобно: скопировал, вставил, заработало.

Вкладка import в Google Fonts с готовым CSS-кодом

Технически код вставляется в начало style.css дочерней темы:

1/*
2 Theme Name: Twenty Seventeen Child
3 Theme URI: https://wordpress.org/themes/twentyseventeen/
4 Template: twentyseventeen
5 Author: the WordPress team
6 Author URI: https://wordpress.org/
7 Version: 1.0
8*/
9
10@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
11
12/* additional CSS goes here */

Почему это худший вариант? @import не даёт браузеру загружать несколько таблиц стилей параллельно. Браузер скачивает CSS-файл, видит внутри @import, и только потом идёт за шрифтом. Последовательная загрузка вместо параллельной, потеря 200-400 мс на каждом шрифте. На мобильном это критично.

Не используйте @import для шрифтов. Вообще.

Библиотеки шрифтов дают <link>-тег для вставки в <head>. Его можно разместить прямо в header.php, файле шаблона, который есть у любой темы WordPress.

Редактирование header.php темы WordPress для вставки шрифтов

Поместите <link> между тегами <head> и </head>. Если работаете с дочерней темой, скопируйте header.php из родительской в дочернюю и правьте там.

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

Способ 3: @font-face и собственный хостинг шрифтов

Если шрифт лежит на вашем сервере, его нужно объявить через директиву @font-face в таблице стилей. Сначала загрузите файлы шрифта (WOFF2, WOFF) через FTP в папку дочерней темы, например wp-content/themes/yourtheme-child/fonts/.

Затем пропишите в style.css:

1@font-face {
2 font-family: 'Roboto';
3 src: url('fonts/Roboto-Regular.woff2') format('woff2'),
4 url('fonts/Roboto-Regular.woff') format('woff');
5 font-weight: normal;
6 font-style: normal;
7 font-display: swap;
8}

Параметр font-display: swap важен: он говорит браузеру сначала показать текст системным шрифтом, а когда кастомный загрузится, подменить. Без этого посетитель видит пустой экран, пока грузится шрифт.

Не забудьте заменить название шрифта и путь. Если исходный файл в TTF или OTF, конвертируйте в WOFF2 через онлайн-конвертер Font Squirrel.

Метод даёт полный контроль, но проигрывает Google Fonts по скорости: ваш сервер почти наверняка медленнее гуглового CDN. Для сайта с посещаемостью до 10 000 человек в месяц разница незаметна. Для высоконагруженных проектов, критична.

Способ 4: functions.php и wp_enqueue_style, каноничный путь WordPress

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

Код добавляется в functions.php активной темы или дочерней темы. Вот рабочий пример для Google Fonts:

1function techblog_add_google_fonts() {
2 wp_enqueue_style(
3 'techblog-google-fonts',
4 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Playfair+Display:wght@700&display=swap',
5 array(),
6 null
7 );
8}
9add_action( 'wp_enqueue_scripts', 'techblog_add_google_fonts' );

Функция wp_enqueue_style принимает четыре параметра: уникальное имя (handle), URL таблицы стилей, массив зависимостей (здесь пустой) и версию (null, WordPress подставит свою). Хук wp_enqueue_scripts гарантирует, что код выполнится в нужный момент загрузки страницы.

Для шрифтов Adobe раньше использовался JavaScript и wp_enqueue_script. Сейчас Adobe Fonts перешли на CSS-подход, аналогичный Google Fonts, поэтому wp_enqueue_style покрывает оба сервиса.

Почему это лучший ручной способ:

  • Шрифты не затрутся при обновлении темы (если вы в дочерней теме).
  • WordPress управляет очерёдностью загрузки и разрешает зависимости.
  • Код изолирован в functions.php, шаблоны остаются чистыми.
  • Другие плагины могут отключить или изменить ваш вызов через стандартные хуки.

Способ 5: плагин, если не хотите трогать код

Не готовы лезть в functions.php? Плагин решит вопрос без единой строки кода.

Easy Google Fonts (визуальный пример, но не для боевых сайтов)

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

Установка стандартная: Плагины → Добавить новый → поиск «Easy Google Fonts» → УстановитьАктивировать.

Пункт Типография в кастомайзере WordPress после установки Easy Google Fonts

После активации в разделе Внешний вид → Настроить появляется новый пункт «Типография». Зайдите в него, выберите Typography Default, увидите элементы управления шрифтами для абзацев и заголовков.

Элементы управления шрифтами в плагине Easy Google Fonts

Нажмите выпадающий список напротив элемента, который хотите изменить. Раскроется меню:

Выпадающее меню выбора шрифта в плагине Easy Google Fonts

Самое важное, Font Family. Здесь доступна вся библиотека Google Fonts (600+ гарнитур). Шрифты сгруппированы по категориям: с засечками, без засечек, Display, Handwriting, Monospace. Можно искать по названию.

Щёлкните по шрифту, изменения сразу видны в превью справа.

Предпросмотр выбранного шрифта в реальном времени в кастомайзере

Дальше тонкая настройка. Вкладка Font Weight/Style управляет толщиной. Text Decoration добавляет подчёркивание, зачёркивание или надчёркивание. Text Transform переключает регистр: все заглавные, все строчные или капитализация.

На вкладке Appearance: цвет шрифта, цвет фона, размер, высота строки и межбуквенный интервал.

Настройки оформления текста в плагине Easy Google Fonts

Вкладка Positioning: поля, отступы, границы, радиус границы и свойство display.

Настройки позиционирования шрифта в плагине Easy Google Fonts

Закончили, нажмите Сохранить и опубликовать вверху.

Честное предупреждение: Easy Google Fonts не обновлялся с 2020 года. На WordPress 6.4+ плагин может не работать, часть пользователей жалуется, что пункт «Типография» не появляется в кастомайзере. Мы показываем его как иллюстрацию подхода: большинство шрифтовых плагинов работают через тот же механизм кастомайзера.

Что делать, если шрифт не меняется

Некоторые темы используют нестандартные CSS-селекторы. Заголовок может быть не просто <h1>, а <h1 class="entry-title">, и плагин «не видит» такой элемент.

Решение: создайте свой контрол шрифта в Настройки → Google Fonts.

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

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

Альтернативные плагины (актуальные в 2026)

Easy Google Fonts не единственный вариант. Три живых альтернативы:

  • EasyFonts, хостит Google Fonts локально на вашем сервере. Автоматически определяет используемые шрифты, скачивает их и отдаёт с вашего домена. Быстрее, чем запросы к Google CDN, плюс полная GDPR-совместимость. Самый лёгкий из трёх по влиянию на производительность.
  • Use Any Font, загружаете свои шрифты без CSS. Плагин конвертирует TTF/OTF/WOFF в веб-формат и размещает на вашем сервере. Подходит для коммерческих шрифтов, купленных по лицензии.
  • Fonts Plugin, альтернативный менеджер Google Fonts с предпросмотром в кастомайзере. В отличие от устаревшего Easy Google Fonts, регулярно обновляется и тестируется с актуальными версиями WordPress.

Применяем шрифт к элементам сайта

Шрифт подключён, но пока «висит в воздухе». Нужно сказать браузеру, к каким элементам его применять.

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

1h1,
2h2,
3h3,
4h4,
5h5,
6h6 {
7 font-family: 'Roboto', sans-serif;
8}

Для основного текста:

1body,
2p,
3li {
4 font-family: 'Inter', sans-serif;
5}

Важный нюанс: название шрифта в font-family должно в точности совпадать с тем, как его объявляет библиотека. Google Fonts использует 'Roboto', а Adobe Fonts может отдавать 'open-sans' (без пробела и кавычек). Смотрите внимательно на код, который даёт сервис, а не на название шрифта на сайте.

Добавить этот CSS можно тремя способами: через кастомайзер (проще всего, не боится обновлений темы), через style.css дочерней темы или через хук wp_head. Рекомендуем первый.

⁉️🤔 Частые вопросы

Сколько шрифтов можно подключить на сайт без потери скорости?

Оптимально, два семейства: одно для заголовков, одно для основного текста. Каждый дополнительный шрифт добавляет HTTP-запрос и 50-200 КБ веса страницы. Три шрифта, уже потолок. И подключайте только нужные начертания: Regular (400) и Bold (700) весят вдвое меньше, чем набор из 5-6 начертаний.

Google Fonts или Adobe Fonts, что выбрать?

Для 9 из 10 сайтов, Google Fonts. Бесплатно, быстро (CDN Google), 1500+ шрифтов, кириллица есть почти у всех популярных гарнитур. Adobe Fonts имеет смысл, если у вас уже оплачена подписка Creative Cloud и нужен конкретный коммерческий шрифт вроде Futura или Minion Pro.

Можно ли использовать скачанный TTF-файл с компьютера?

Можно, но сначала конвертируйте в WOFF2 (современный сжатый формат для веба). TTF-файлы не сжаты и занимают заметно больше места. WOFF2 со сжатием Brotli уменьшает объём файла в несколько раз. Конвертер: Font Squirrel Webfont Generator.

Плагин или functions.php, что надёжнее?

functions.php надёжнее для долгосрочной работы: нет лишней зависимости, код прозрачен, обновления плагина вас не касаются. Плагин выигрывает в удобстве: 5 минут против получаса на изучение хуков. Для боевого сайта выбирайте wp_enqueue_style в дочерней теме. Для быстрого прототипа или сайта клиента, которому нужен простой интерфейс, плагин.

Почему шрифт на мобильном выглядит не так, как на десктопе?

Мобильные браузеры иногда подменяют системный шрифт или иначе рендерят сглаживание. Плюс размеры экрана другие: 16px на десктопе читается нормально, а на телефоне может быть крупновато. Решение: задайте относительный размер через clamp() (например font-size: clamp(16px, 2.5vw, 20px)) и проверьте на реальном устройстве, а не в эмуляторе.

Итоговый расклад: что ставить на сайт в 2026

Если резюмировать всё пятью предложениями:

  • Google Fonts, источник шрифтов по умолчанию. Хватает для 95% проектов: быстро, бесплатно, кириллица есть везде.
  • functions.php + wp_enqueue_style, лучший ручной метод. Чистый, обновления темы не страшны, код прозрачен.
  • Плагин EasyFonts, если хотите локальный хостинг Google Fonts без возни с кодом. Быстрее штатного CDN и GDPR-совместимо.
  • Два начертания на шрифт, не больше, Regular и Bold. Каждый лишний вариант крадёт 30-50 КБ загрузки.
  • WOFF2, не TTF, конвертируйте перед загрузкой на сервер. Экономия полмегабайта на странице.

Замена шрифтов, одна из тех задач, где час внимательной настройки даёт годы визуального профита. Начните прямо сейчас: зайдите на сайт Google Fonts, найдите пару гарнитур под свой проект и попробуйте способ 4 из списка выше.