Прогнали сайт через GTmetrix і побачили помилки Google Fonts? Знайома ситуація. Зовнішні запити до fonts.googleapis.com гальмують завантаження, а плагіни кешування на кшталт WP Rocket чи WP Fastest Cache не можуть стиснути те, що лежить на чужому сервері.

З 2022 року додалася ще одна причина: німецький суд визнав динамічне завантаження Google Fonts порушенням GDPR, IP відвідувача передається на сервери Google у США без згоди. Локальний хостинг шрифтів закриває одразу три завдання: швидкість за GTmetrix, відповідність GDPR і повний контроль над кешуванням.

Далі, покрокова інструкція. Від вибору шрифту на Google Fonts до чистого звіту GTmetrix без жодної помилки зовнішніх ресурсів.

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

• Завантажте потрібні накреслення шрифту з Google Fonts
• Конвертуйте.ttf у WOFF2 через Transfonter або google-webfonts-helper
• Завантажте файли в /wp-content/uploads/fonts/ через FTP
• Пропишіть @font-face у CSS теми та перевірте відображення
• Повторно протестуйте сайт у GTmetrix, помилки Google Fonts мають зникнути

Чому взагалі варто завантажувати шрифти локально

Коли браузер завантажує сторінку, він іде на fonts.googleapis.com, отримує CSS, а потім тягне самі файли шрифтів із fonts.gstatic.com. Це щонайменше два зовнішні DNS-запити та дві HTTP-сесії, на які ви не впливаєте. Плагін кешування безсилий: стиснути або відкласти завантаження чужого ресурсу неможливо.

Локальне завантаження змінює картину. Файли шрифтів лежать на вашому сервері, той самий домен, той самий CDN, те саме кешування. Браузер не ходить назовні, а GTmetrix і PageSpeed Insights перестають скаржитися на зовнішні ресурси.

І так, GDPR. У січні 2022 року земельний суд Мюнхена постановив: динамічне завантаження Google Fonts без згоди користувача порушує GDPR. Після цього хвиля позовів прокотилася Європою, а власники сайтів масово перейшли на локальний хостинг. Хостинг шрифтів у себе, найнадійніше рішення.

Крок 1. Виберіть шрифт на Google Fonts

Заходимо на Google Fonts і знаходимо потрібний шрифт. У цьому посібнику я використовую Roboto, один із найпопулярніших шрифтів у вебі, з підтримкою кирилиці.

Два правила економії:

• Мінімум накреслень. Кожне накреслення (regular, bold, italic), окремий файл і окремий запит. Якщо в дизайні використовуються лише regular і bold, зніміть позначки з решти.
• Мінімум шрифтів. Один-два шрифти на сайт. Третій — це вже перебір для швидкості, хоч би яким гарним він був.

Я вибрав Roboto Regular (400) і Roboto Bold (700). Усе.

Крок 2. Завантажте шрифт

На сторінці шрифту натискаємо кнопку «Download family». Google запакує всі накреслення в ZIP-архів. На цьому етапі вибір накреслень не важливий, архів однаково містить усю родину. Відбором займемося далі.

Розпакуйте архів. Нам потрібні файли Roboto-Regular.ttf і Roboto-Bold.ttf.

Крок 3. Конвертуйте шрифти у вебформати

Браузери не використовують.ttf безпосередньо. Потрібні формати WOFF і WOFF2, вони стиснуті та завантажуються швидше. Є два інструменти, обидва безплатні.

Transfonter, класика: заходимо на transfonter.org, тиснемо «Add fonts», завантажуємо.ttf-файли.

Налаштування залишаємо за замовчуванням, WOFF і WOFF2 покривають усі сучасні браузери. EOT (для старих Internet Explorer) у 2026 році не потрібен. Натискаємо «Convert».

Google-webfonts-helper, більш сучасний варіант спеціально для Google Fonts. Сервіс gwfh.mranftl.com сам генерує і WOFF2-файли, і готовий CSS з @font-face. Не потрібно завантажувати шрифти на сторонній сервер, усе відбувається локально в браузері. Для ліцензійних шрифтів і брендових гарнітур це критично.

Який інструмент обрати? Transfonter простіший для разового завдання. Google-webfonts-helper зручніший, якщо змінюєте шрифти часто або працюєте з комерційними гарнітурами, які не хочете завантажувати на чужі сервери.

Крок 4. Завантажте вебшрифти на сервер

Після конвертації завантажуємо ZIP. Усередині, файли.woff і.woff2 для кожного накреслення. Для Roboto Regular і Bold отримуємо 4 файли:

Завантажуємо їх через FTP або файловий менеджер хостингу до папки /wp-content/uploads/fonts/. Шлях /wp-content/uploads/ обрано не випадково: оновлення ядра та теми її не чіпають, на відміну від папки теми.

Після завантаження перевірте, відкрийте в браузері пряме посилання на файл:

https://ваш-сайт.com/wp-content/uploads/fonts/Roboto-Regular.woff2

Браузер має почати завантаження. Якщо ні, перевірте права на папку (мають бути 755) і сам шлях.

Крок 5. Пропишіть @font-face у CSS

У ZIP-архіві з Transfonter є файл stylesheet.css, це готова заготовка для підключення шрифту. Відкриваємо його та копіюємо вміст.

Вставляємо код у самий верх style.css активної теми (або custom.css, якщо тема його підтримує). Шлях до файлів, на бойовому сервері, не з архіву. Замініть відносні URL на абсолютні:

Вихідний код з stylesheet.css:

1
src: url('Roboto-Bold.woff2') format('woff2'),
2
     url('Roboto-Bold.woff') format('woff');

Змінюємо на:

1
src: url('https://ваш-сайт.com/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
2
     url('https://ваш-сайт.com/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');

Замініть ваш-сайт.com на свій домен. Повторіть для кожного накреслення.

Щоб шрифтом було зручно користуватися у верстці, додайте нижче класи-обгортки:

1
.roboto_font {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}
4
 
5
.roboto_bold_font {
6
  font-family: "Roboto", "Arial", sans-serif;
7
  font-weight: bold;
8
}

Тепер будь-який елемент із класом roboto_font або roboto_bold_font відображатиметься шрифтом Roboto.

Крок 6. Перевірте відображення

Створіть тестову сторінку (або відкрийте будь-яку наявну в режимі чернетки) і вставте в текстовий редактор HTML:

1
<h2>Стандартный шрифт темы</h2>
2
<h2 class="roboto_font">Roboto Regular — пользовательский шрифт</h2>
3
<h2 class="roboto_bold_font">Roboto Bold — жирное начертание</h2>

Відкрийте попередній перегляд. Перший заголовок, стандартним шрифтом теми, другий і третій, Roboto.

Якщо шрифт не підхопився, відкрийте консоль браузера (F12 → Network) і перевірте, що WOFF2-файли завантажуються з вашого домену, а не з fonts.gstatic.com. Код відповіді має бути 200, тип, font/woff2.

Крок 7. Зробіть шрифт шрифтом за замовчуванням

Щоб Roboto застосовувався до всього сайту без дописування класів до кожного заголовка, додайте в style.css:

1
body {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}

Обережно: якщо тема вже використовує кастомний шрифт, знайдіть у style.css рядки з font-family і замініть їх. Пряме дописування body-правила поверх наявного створить конфлікт, переконайтеся, що старі оголошення видалено або закоментовано.

Крок 8. Налаштуйте резервний стек шрифтів

Google Fonts — це не системний шрифт. Якщо браузер не зможе його завантажити (відвідувач без інтернету, блокувальник реклами, тимчасовий збій), сторінка залишиться без тексту. Рішення, стек шрифтів.

Неправильно:

1
font-family: 'Roboto';

Правильно, з резервними шрифтами:

1
font-family: 'Roboto', Arial, sans-serif;

Браузер пробує Roboto. Не вийшло, бере Arial. Немає Arial, системний sans-serif. Сторінка завжди читабельна, навіть якщо кастомний шрифт недовантажився.

Крок 9. Повторно протестуйте сайт у GTmetrix

Запускаємо GTmetrix заново. Розділ «Waterfall» більше не повинен показувати запитів до fonts.googleapis.com і fonts.gstatic.com. Помилка «Serve static assets with an efficient cache policy» для шрифтів також зникає, тому що тепер ці активи на вашому сервері й кешуються за вашими правилами.

Якщо помилки залишилися, перевірте вкладку Waterfall. Можливо, тема або плагін (наприклад, Elementor) продовжують тягнути шрифти з CDN Google. Тоді допоможе наступний розділ.

Альтернатива для лінивих: плагін Local Google Fonts

Якщо не хочеться возитися з FTP і CSS, є плагін Local Google Fonts. Він автоматично знаходить усі Google Fonts, які використовують тема й плагіни, завантажує їх і роздає з вашого сервера.

Плюси: встановив, активував, забув. Мінуси: працює тільки з Google Fonts (не з іншими зовнішніми шрифтами) і не дає тонкого контролю над форматами. Для більшості сайтів на WordPress цього вистачає з запасом.

Корисне відео за темою

Англійською, але з наочною демонстрацією кожного кроку, від вибору шрифту до фінального CSS:

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

Чи обов’язково хостити шрифти локально у 2026 році?

З погляду закону, так, якщо у вас є відвідувачі з ЄС. Мюнхенський суд у 2022 році створив прецедент, і відтоді десятки німецьких судів підтвердили: динамічне завантаження Google Fonts без згоди = порушення GDPR. З погляду швидкості теж так: два зайві DNS-запити й некерований зовнішній ресурс не роблять сайт швидшим. Локальний хостинг шрифтів закриває обидві проблеми одночасно. Плагін Local Google Fonts дає раду за 5 хвилин, ручний метод із Transfonter, за 15. Обирайте за готовністю заходити на FTP.

Google-webfonts-helper чи Transfonter, що краще?

Для разового підключення одного шрифту різниці майже немає. Transfonter простіший: завантажили.ttf, отримали WOFF2 і CSS. Google-webfonts-helper зручніший, коли часто змінюєте шрифти: він не завантажує файли на сторонній сервер і одразу генерує готовий @font-face із правильними шляхами. Для комерційних ліцензійних шрифтів, тільки google-webfonts-helper.

Що робити, якщо після локального завантаження шрифти не відображаються?

Три типові причини. Перша, неправильний шлях в url(): перевірте, чи посилання відкривається в браузері й віддає файл, а не 404. Друга, CORS: якщо шрифти завантажуються з CDN або піддомену, сервер має віддавати заголовок Access-Control-Allow-Origin. Третя, конфлікт із темою: відкрийте DevTools (F12 → Computed), знайдіть елемент із вашим шрифтом і подивіться, який font-family застосовується фактично. Часто тема перевизначає його нижче в каскаді.

Чи можна хостити шрифти на CDN, а не на своєму сервері?

Так, але CDN має бути вашим. Ключовий принцип, шрифти віддаються з того самого домену (або піддомену), що й сайт, без крос-доменних запитів до сторонніх серверів. Тоді й кешування працює, і GDPR не порушується.

Як перевірити, що шрифти точно завантажуються локально?

Відкрийте DevTools → Network → вкладка Font. Оновіть сторінку. Усі запити за шрифтами мають іти на ваш домен. Якщо бачите fonts.googleapis.com або fonts.gstatic.com, десь залишилося зовнішнє завантаження. Найімовірніше, тема або плагін продовжують її використовувати, перевірте налаштування або встановіть Local Google Fonts.

Що обрати: ручне завантаження чи плагін

Якщо ви дочитали до цього місця, найімовірніше, вам не байдуже, що відбувається зі швидкістю сайту. І це правильно. Різниця між «начебто швидко» і «GTmetrix Grade A» часто впирається саме в такі дрібниці, як зовнішні шрифти.

Для швидкого результату встановлюйте Local Google Fonts. П’ять хвилин, і зовнішні запити до Google зникають.

Для повного контролю над форматами, кешуванням і резервними стеками, ручний метод із Transfonter або google-webfonts-helper. Ті самі 15 хвилин, але ви знаєте кожен файл на сервері.

У будь-якому разі проведіть тест у GTmetrix до і після. Скриншоти «до» і «після», найкращий спосіб переконатися, що все зроблено не дарма.