Шрифт за замовчуванням видає сайт на 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. Інтерфейс зустрічає сіткою карток зі зразком кожного шрифту.

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

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

Клацніть «View specimen», відкриється сторінка шрифту з усіма накресленнями, таблицею гліфів та зразками в різних розмірах.

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

Розгорніть панель колекції, побачите вкладки «Embed» та «Customize».

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

Якщо сайт мовою з нелатинським алфавітом, виберіть потрібний набір символів унизу сторінки. Для кирилиці це Cyrillic.

Дві кнопки зі стрілками вгорі: ліва, поділитися колекцією, права, завантажити файли шрифту на комп’ютер. Стане в пригоді для Photoshop або якщо вирішите хостити шрифт самостійно.

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-рядком. Виглядає зручно: скопіював, вставив, запрацювало.

Технічно код вставляється на початок 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 для шрифтів. Узагалі.

Спосіб 2: вставка тега link у header.php

Бібліотеки шрифтів дають <link>-тег для вставки в <head>. Його можна розмістити прямо в 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:

1
function 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
}
9
add_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» → Встановити → Активувати.

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

Натисніть випадний список навпроти елемента, який хочете змінити. Розкриється меню:

Найважливіше, Font Family. Тут доступна вся бібліотека Google Fonts (понад 600 гарнітур). Шрифти згруповані за категоріями: із засічками, без засічок, Display, Handwriting, Monospace. Можна шукати за назвою.

Клацніть по шрифту, зміни одразу видно в прев’ю праворуч.

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

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

Вкладка Positioning: поля, відступи, межі, радіус межі та властивість display.

Закінчили, натисніть Зберегти й опублікувати вгорі.

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

Що робити, якщо шрифт не змінюється

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

Рішення: створіть свій контроль шрифту в Налаштування → 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 для заміни шрифту заголовків. Додайте його через Зовнішній вигляд → Налаштувати → Додаткові стилі:

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

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

1
body,
2
p,
3
li {
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 зі списку вище.