Roboto у заголовках, Open Sans у тексті. Типографіка сайту виглядає як у половини інсталяцій WordPress. Відвідувач помітив шаблон, упізнав шрифт, і сайт втратив частину індивідуальності ще до першого абзацу.

Кастомний шрифт підключається до WordPress двома способами: через плагін за 2 хвилини без жодного рядка коду або вручну через @font-face із повним контролем над файлами. Обидва працюють надійно, вибір залежить від вашого досвіду з CSS.

Нижче розберемо, де брати шрифти, як налаштувати плагін і як прописати @font-face у дочірній темі. Код узято з робочих інсталяцій: вставте, замініть ім’я файлу, і типографіка готова.

💡 Швидкий огляд:

• Завантажте шрифт на DaFont або FontSquirrel у форматі WOFF2 або TTF: щонайменше три накреслення (звичайне, жирне, курсив).
• Установіть Use Any Font або Fonts Plugin, завантажте файл через адмінку та призначте шрифт для елементів. Код не потрібен.
• Або підключіть вручну: створіть папку fonts у дочірній темі, завантажте файли через FTP і пропишіть @font-face у style.css для кожного накреслення.
• Перевірте відображення в кількох браузерах і не ставте більше двох кастомних шрифтів: кожен файл збільшує вагу сторінки.

Де брати шрифти та в якому форматі

Google Fonts знають усі, саме тому вони всюди. Якщо потрібно щось менш заїжджене, ось три перевірені майданчики.

DaFont пропонує понад 3 500 шрифтів із категоріями від коміксів до вінтажу. Більшість безкоштовні для особистого використання. Для комерційного проєкту перевіряйте ліцензію кожного файлу окремо, вони вказані на сторінці шрифту.

FontSquirrel фокусується на безкоштовних шрифтах із комерційною ліцензією. Колекція невелика, зате кожен шрифт перевірений юристами. Вбудований генератор конвертує завантажений файл у WOFF і WOFF2 одним кліком.

FontSpring продає платні шрифти, але майже в кожній родині є одне-два безкоштовних накреслення. Перед завантаженням уважно читайте ліцензію: у різних накреслень можуть бути різні умови.

Загальне правило: не ставте на сайт більше двох кастомних шрифтів. Один для заголовків, другий для основного тексту, цього достатньо. Кожен файл додає HTTP-запит і збільшує вагу сторінки на 30-100 КБ.

Завантажуйте всі накреслення одразу: звичайне, жирне, курсив і жирний курсив. Якщо файл лише одного накреслення, браузер імітуватиме bold та italic штучним потовщенням, результат виглядає грубо.

Спосіб 1: плагін за 2 хвилини

Плагін, найпростіший шлях. Установили, завантажили файл шрифту, вибрали, де застосувати. Жодного коду, жодних FTP-з’єднань.

Use Any Font

🔗 Use Any Font на WordPress.org

🔗 Скріншоти та демо

Завантажує шрифти у форматах TTF, OTF і WOFF, автоматично конвертує у WOFF2 зі стисненням Brotli. За даними сторінки плагіна на WordPress.org, завантаження пришвидшується приблизно на 30%. Шрифти зберігаються на вашому сервері: GDPR-сумісність із коробки, без залежності від зовнішніх API після конвертації.

Після встановлення отримуєте API-ключ (безплатний Lite-ключ дає одну конвертацію), завантажуєте файл і призначаєте шрифт через візуальний інтерфейс. Можна застосувати до заголовків, абзаців або конкретних блоків прямо з адмінки.

Підтримує інтеграцію з Elementor, Divi, WPBakery, Gutenberg: призначаєте шрифт один раз у плагіні, він з’являється у списку шрифтів білдера.

Зверніть увагу: для кількох шрифтів потрібен Premium-ключ. Для типового сайту безплатної версії достатньо: один фірмовий шрифт на заголовки, Google Fonts на текст.

Fonts Plugin

🔗 Fonts Plugin на WordPress.org

🔗 Скриншоти плагіна

Колишній Olympus Google Fonts: перейменований, функціональність розширилася. За даними сторінки плагіна, у нього 200 000+ активних установок і рейтинг 5 зірок від понад 1 200 користувачів. Підтримує Google Fonts, Adobe Fonts (Typekit) і завантаження власних файлів.

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

Pro-версія додає локальний хостинг Google Fonts для GDPR, вибіркове завантаження лише потрібних накреслень і керування кеглем, кольором, міжрядковим інтервалом. Безплатної версії достатньо для більшості сайтів.

Плагін чи вручну: коли що вибирати

Плагін виграє швидкістю: встановлення за 2 хвилини, код не потрібен. Але ви залежите від оновлень плагіна та його сумісності з версією WordPress.

Ручне встановлення через @font-face складніше в налаштуванні, зате ви контролюєте кожен байт. Жодних сторонніх API, жодних оновлень, що ламають типографіку.

Якщо ви вже працюєте з дочірньою темою, ручний метод органічно впишеться у ваш CSS. Шрифти стануть частиною теми й житимуть там роками.

Спосіб 2: ручне встановлення через @font-face

Директива @font-face підключає файли шрифтів безпосередньо з вашого сервера. Підтримуються формати TTF, OTF, WOFF, WOFF2 та SVG. Для кожного накреслення потрібен окремий блок коду.

Зате після налаштування ви забуваєте про типографіку на роки: оновлення WordPress і теми не зачеплять шрифти, вони лежать у вас у дочірній темі та завантажуються щоразу як частина CSS.

Перед початком створіть дочірню тему: усі правки вносяться до неї, основна тема залишається недоторканою й оновлюватиметься без втрати ваших правок.

Крок 1: створіть папку для шрифтів

У папці дочірньої теми створіть каталог fonts. Додайте його через FTP або файловий менеджер хостингу:

1
wp-content/themes/your-child-theme/fonts/

Якщо ваша дочірня тема називається twentytwentyfour-child, шлях буде wp-content/themes/twentytwentyfour-child/fonts/.

Крок 2: завантажте файли шрифтів на сервер

Скопіюйте завантажені файли до папки fonts через FTP або файловий менеджер хостингу. Для кожного накреслення окремий файл:

1
fonts/WebFont.woff2
2
fonts/WebFont.woff
3
fonts/WebFont-Bold.woff2
4
fonts/WebFont-Bold.woff
5
fonts/WebFont-Italic.woff2
6
fonts/WebFont-Italic.woff

На практиці достатньо форматів WOFF і WOFF2: вони покривають усі сучасні браузери та важать менше за TTF. За даними MDN Web Docs, WOFF2 стискає шрифт на 30% ефективніше за WOFF і підтримується всіма браузерами з 2016 року.

Браузер сам обере відповідний формат із підключених: якщо підтримує WOFF2, завантажить його, якщо ні, візьме WOFF.

Крок 3: пропишіть @font-face у style.css

Відкрийте style.css дочірньої теми та додайте код після заголовка теми (коментаря з іменем та описом теми). Почніть зі звичайного накреслення:

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

font-family, ім’я шрифту, яке використовуватимете в CSS. Називайте так, щоб не сплутати із системними: не Arial, а MyBrandSans або BrandHeading. src, шлях до файлів відносно style.css. Порядок важливий: WOFF2 першим (найлегший), WOFF другим (fallback для старих браузерів).

Крок 4: додайте курсив

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Italic.woff2') format('woff2'),
4
         url('fonts/WebFont-Italic.woff') format('woff');
5
    font-weight: normal;
6
    font-style: italic;
7
}

Зверніть увагу: font-family той самий, font-weight залишається normal, а font-style змінюється на italic. Браузер сам підставить потрібний файл для тега em і властивості font-style: italic.

Крок 5: додайте жирне накреслення

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Bold.woff2') format('woff2'),
4
         url('fonts/WebFont-Bold.woff') format('woff');
5
    font-weight: bold;
6
    font-style: normal;
7
}

Тут font-style знову normal, а font-weight уже bold. Тепер тег strong і властивість font-weight: bold відображатимуться вашим жирним файлом, а не браузерною імітацією потовщення. Різниця помітна: справжнє жирне накреслення збалансоване дизайнером шрифту, імітація виглядає грубо.

Крок 6: жирний курсив (опціонально)

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-BoldItalic.woff2') format('woff2'),
4
         url('fonts/WebFont-BoldItalic.woff') format('woff');
5
    font-weight: bold;
6
    font-style: italic;
7
}

Чотири накреслення покривають практично всі типографічні завдання звичайного сайту. Якщо дизайн не потребує жирного курсиву, пропустіть цей крок: файл не завантажуватиметься, поки CSS явно не запитає поєднання bold + italic.

Крок 7: застосуйте шрифт до елементів

Після @font-face додайте правила, які призначать шрифт конкретним елементам. Додайте в style.css дочірньої теми:

1
body {
2
    font-family: 'MyWebFont', Arial, sans-serif;
3
}
4
 
5
h1, h2, h3 {
6
    font-family: 'MyWebFont', Georgia, serif;
7
}

Перше правило: ваш шрифт для основного тексту, з fallback на системний Arial. Друге: той самий шрифт для заголовків, з fallback на Georgia.

Якщо файл шрифту не завантажився (сервер ліг або шлях неправильний), сайт не залишиться без тексту: браузер покаже Arial або Georgia. Fallback обов’язковий: без нього браузер підставить дефолтний шрифт системи, зазвичай Times New Roman, і типографіка розвалиться.

Готово. Кастомний шрифт підключено без плагінів і зовнішніх сервісів. Типографіка живе на вашому сервері та не зламається, якщо сторонній API змінить умови або ляже.

Відео: покрокове налаштування на живому сайті

Подивіться, як увесь процес виглядає на реальному сайті WordPress від вибору шрифту до застосування до заголовків:

У ролику показано обидва способи: через плагін і через @font-face. Зручно поставити на паузу й повторювати за автором. Відео англійською, але процес візуально зрозумілий і без озвучення.

⁉️🤔 Часті запитання

Скільки кастомних шрифтів можна додати на сайт?

Не більше двох: один для заголовків, другий для основного тексту. Кожен шрифт тягне за собою кілька файлів накреслень від 30 до 100 КБ кожен. Два шрифти додадуть відчутний обсяг до завантаження сторінки. Третій помітно погіршить швидкість, особливо на повільному мобільному з'єднанні.

Чи обов'язково створювати дочірню тему для @font-face?

Формально ні: можна вставити @font-face прямо в style.css основної теми. Але після найближчого оновлення теми всі правки зникнуть. Дочірня тема вирішує це раз і назавжди. Якщо ви ще не зробили її, наш посібник із дочірніх тем WordPress проведе від встановлення до першого результату.

Який формат файлу обрати: WOFF, WOFF2 чи TTF?

WOFF2, пріоритетний. Він стискає шрифт помітно сильніше за WOFF і підтримується всіма сучасними браузерами. WOFF, резервний варіант для старих версій браузерів. TTF та OTF підключайте лише якщо шрифту немає у вебформатах: вони не стиснуті й важать удвічі більше. Порядок у src завжди: WOFF2, потім WOFF.

Чому шрифт не відображається після встановлення?

Три часті причини. Перша: шлях до файлу в url() неправильний, перевірте, що шлях будується від style.css, а не від кореня сайту. Друга: кеш браузера тримає старий CSS, відкрийте сайт в інкогніто або скиньте кеш комбінацією Ctrl+F5. Третя: конфлікт із темою, яка перевизначає font-family із вищим пріоритетом, перевірте в інспекторі, який CSS-селектор реально застосовується до тексту.

Чи потрібно вказувати format() у src?

Формально браузер сам визначає формат за заголовками файлу. Але явний format('woff2') пришвидшує вибір: браузер не завантажує файл, який свідомо не підтримує. Тому завжди вказуйте. Це рекомендація специфікації CSS Fonts Level 4.

Як перевірити, що шрифт завантажується з мого сервера, а не ззовні?

Відкрийте DevTools (F12), вкладка Network, фільтр Fonts, оновіть сторінку. У списку мають бути лише файли з вашого домену. Якщо бачите fonts.googleapis.com або fonts.gstatic.com, Google Fonts вантажаться зовнішньо. Для GDPR-сумісності переведіть їх на локальний хостинг через Fonts Plugin Pro або завантажте вручну й підключіть через @font-face.

Який спосіб підключення шрифтів обрати?

Обидва методи працюють надійно. Вибір залежить від того, що для вас важливіше: швидкість налаштування чи контроль над кожним байтом.

Ставите шрифт уперше й не хочете лізти в код, беріть Use Any Font. Завантажили файл, призначили на заголовки, готово. Безплатної версії вистачає для одного фірмового шрифту на заголовки.

Потрібен доступ до каталогу Google Fonts із живим попереднім переглядом прямо в кастомайзері, беріть Fonts Plugin. Безплатної версії вистачає для більшості завдань, Pro потрібен лише для локального хостингу Google Fonts під GDPR.

Уже працюєте з дочірньою темою і звикли правити CSS руками, обирайте @font-face. Нуль зовнішніх залежностей, повний контроль, і після налаштування ви не згадуєте про типографіку роками. Оновлення теми не зачеплять шрифти, вони живуть у вашій дочірній темі як частина CSS.

Почніть із плагіна: це 2 хвилини й жодного ризику. А який шрифт стоїть на вашому сайті зараз, стандартний теми чи вже підключали свій?