Як розміщувати шрифти локально замість використання Google Fonts

Навіщо самостійно розміщувати Google Fonts?

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

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

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

По-друге, це створює питання приватності. Запит шрифту може розкрити сторонній стороні IP-адресу користувача, user agent, контекст referrer policy та інформацію про час запиту. Google Fonts заявляє, що не встановлює cookies через Fonts API, але “без cookies” не означає “без персональних даних.” За GDPR IP-адреса в певному контексті все ще може бути персональними даними.

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

Коли все зроблено добре, це також часто покращує продуктивність. Ключове тут — “зроблено добре.” Скопіювати шість файлів шрифтів у /assets/fonts/ і завантажувати їх усі на кожній сторінці може бути гірше, ніж користуватися розміщеним сервісом. Якщо вам потрібен ширший контекст продуктивності, наша попередня стаття про те, чому вебшрифти досі є найпростішою перемогою для продуктивності на більшості сайтів, пояснює типові патерни марнування ресурсів.

Що змінюється, коли ви розміщуєте шрифти самостійно

Коли ви використовуєте Google Fonts звичним способом, ваша сторінка робить це:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

Браузер спочатку запитує CSS з fonts.googleapis.com, а потім завантажує файли шрифтів з fonts.gstatic.com.

Коли ви розміщуєте шрифти самостійно, сторінка має запитувати і CSS, і файли шрифтів із вашого власного домену:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

До цієї відповідальності варто ставитися серйозно. Шрифти лежать на критичному шляху рендерингу. Невдала конфігурація шрифтів може спричинити невидимий текст, зсуви макета та повільний перший рендер.

Крок 1: Проведіть аудит того, що ви справді використовуєте

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

Типовому маркетинговому сайту можуть знадобитися:

• Regular 400 для основного тексту
• Semibold 600 або bold 700 для заголовків і кнопок
• Italic 400 лише якщо дизайн справді використовує курсив
• Лише латинський набір символів, якщо сайт не підтримує більше мов

Ставтеся з підозрою до старих стандартних налаштувань дизайн-системи. Багато сайтів завантажують 300, 400, 500, 600, 700, курсиви та кілька писемностей лише тому, що хтось колись вибрав їх у селекторі шрифтів.

У browser DevTools відкрийте панель Network, відфільтруйте за “font,” перезавантажте сторінку й перевірте, які файли запитуються. Потім перегляньте CSS на використання font-weight. Якщо ваш CSS ніколи не використовує 300, не розміщуйте 300.

Якщо ви пізніше оцінюватимете вплив, Lighthouse може допомогти, але не сприймайте його оцінку як усю картину. Використовуйте його як діагностичний інструмент, а не як суддю. У нас є окремий посібник про те, як читати звіт Lighthouse без паніки, який корисний під час пріоритезації виправлень, пов’язаних зі шрифтами.

Крок 2: Завантажте правильні файли шрифтів

Google Fonts пропонує шрифти з відкритим кодом. Ви можете завантажити їх із сайту Google Fonts або з відповідного репозиторію проєкту шрифту. Перевірте ліцензію, але більшість Google Fonts поширюються за відкритими ліцензіями, такими як SIL Open Font License або Apache License.

Для вебу віддавайте перевагу WOFF2. Він широко підтримується сучасними браузерами й зазвичай значно менший за TTF або OTF. У 2026 році віддавати TTF безпосередньо браузерам рідко виправдано для публічних сайтів.

Розумна структура директорій виглядає так:

/public
  /fonts
    inter-latin-400.woff2
    inter-latin-600.woff2
    inter-latin-700.woff2

Використовуйте описові імена файлів. Через шість місяців font.woff2 дратуватиме. inter-latin-600.woff2 — нудно, але корисно.

Якщо ваш сайт використовує систему збірки, зберігайте вихідні шрифти в зрозумілому місці й дозвольте build pipeline копіювати оптимізовані файли до директорії публічних ресурсів.

Крок 3: Підмножуйте шрифти там, де це доречно

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

Є два поширені підходи:

1. Використати готову підмножину від постачальника шрифту або з репозиторію.
2. Згенерувати власну підмножину за допомогою інструмента для шрифтів, наприклад pyftsubset з fonttools.

Для багатьох команд готових латинських підмножин достатньо. Кастомне підмноження корисне, коли у вас дуже обмежені сторінки, наприклад одна кампанійна сторінка з невеликою кількістю тексту або продуктовий UI з передбачуваним покриттям символів.

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

Крок 4: Напишіть правила @font-face

Мінімальне локальне налаштування виглядає так:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Тут важливі кілька деталей.

Використовуйте font-display: swap для більшості контентних сайтів. Це вказує браузеру швидко показати текст резервним шрифтом, а потім замінити його вебшрифтом, коли той завантажиться. Так ви уникаєте найгіршої версії FOIT: спалаху невидимого тексту.

Задайте явний стек резервних шрифтів. Якщо кастомний шрифт не завантажиться, користувачі все одно мають отримати читабельний текст. Резервні шрифти — не другорядна думка; вони є частиною дизайну. Якщо потрібно переглянути розміри, довжину рядка та вибір основного тексту, почніть із практичного посібника з читабельної типографіки в сучасному вебі.

Правильно зіставляйте насиченості. Якщо ваш CSS просить font-weight: 500, а ви визначили лише 400 і 700, браузер може синтезувати проміжну насиченість. Це не завжди жахливо, але може виглядати непослідовно.

Крок 5: Приберіть зовнішні виклики Google Fonts

Після додавання локального CSS шрифтів приберіть старі віддалені виклики з шаблонів.

Шукайте:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?..." rel="stylesheet">

Також перевірте:

• Налаштування тем у CMS-платформах
• Панелі типографіки в page-builder
• Сторонні віджети
• Tag managers
• Старі CSS-імпорти на кшталт @import url('https://fonts.googleapis.com/...')

Останнє трапляється часто. CSS @import для шрифтів зазвичай гірший для продуктивності, бо затримує виявлення ресурсу. Якщо ви розміщуєте шрифти самостійно, визначайте їх безпосередньо в основному CSS або у файлі CSS шрифтів, який завантажується рано.

Робота над приватністю часто провалюється, бо команди виправляють очевидний шаблон, але пропускають скрипти, віджети та застарілі вставки. Та сама закономірність проявляється в роботі зі згодою; наш посібник про те, що змінилося для cookies у 2026 році, буде корисним доповненням, якщо ви ширше зменшуєте сторонню поверхню.

Крок 6: Налаштуйте заголовки кешування

Файли шрифтів — це статичні ресурси. Їх слід кешувати агресивно, якщо їхні імена файлів версіоновані або мають content hash.

Хороший production-заголовок:

Cache-Control: public, max-age=31536000, immutable

Використовуйте довготривале immutable-кешування лише якщо URL змінюється, коли змінюється файл. Наприклад:

inter-latin-400.a8f3c2.woff2

або версіонований шлях:

/fonts/v2/inter-latin-400.woff2

Якщо ви перезапишете /fonts/inter-latin-400.woff2 без зміни URL, деякі користувачі можуть довго зберігати старий файл. Це нормально, доки не стане проблемою. Версіонування її уникає.

Також віддавайте шрифти з правильним MIME type:

Content-Type: font/woff2

Більшість сучасних hosting-платформ роблять це автоматично, але це варто перевірити.

Крок 7: Розгляньте preload лише для критичного шрифту

Preloading може допомогти браузеру раніше виявити важливий шрифт:

<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

Використовуйте це помірковано. Preload основний шрифт для тексту above-the-fold, а не кожну насиченість. Надмірний preload конкурує з CSS, зображеннями та JavaScript.

Навіть для шрифтів із того самого origin додавайте crossorigin до font preloads. Завантаження шрифтів використовує CORS mode, і його відсутність у деяких конфігураціях може спричинити дубльовані завантаження.

Якщо ви не впевнені, тестуйте. Не копіюйте preloads бездумно лише тому, що так написано в чеклісті.

Крок 8: Протестуйте приватність і продуктивність

Тестування просте.

Відкрийте DevTools, перезавантажте сторінку з вимкненим кешем і відфільтруйте панель Network за:

• fonts.googleapis.com
• fonts.gstatic.com
• .woff2
• font

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

Потім протестуйте з холодним і теплим кешем. Під час першого відвідування шрифти мають завантажитися один раз. Під час наступних відвідувань вони мають братися з memory або disk cache залежно від браузера.

Перевірте зсув макета, коли шрифт підміняється. Якщо заголовки стрибають, метрики вашого резервного шрифту надто відрізняються від вебшрифту. Видимий зсув можна зменшити, вибравши ближчий резервний шрифт або використавши новіші CSS font metric overrides, такі як size-adjust, ascent-override, descent-override і line-gap-override. Це більш просунуті можливості, але вони корисні для відполірованих інтерфейсів.

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

Типові помилки, яких варто уникати

Розміщення надто багатьох насиченостей

Це найпоширеніша помилка. Двох насиченостей часто достатньо. Трьох зазвичай більш ніж досить. П’ять — ознака проблеми в дизайн-системі, якщо немає вагомої причини.

Забуті курсиви

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

Залишене старе посилання на Google CSS

Це зводить нанівець увесь сенс. Після міграції жоден запит шрифту не має йти до Google, якщо його не додає інший компонент.

Віддавання шрифтів без довготривалого кешування

Самостійне розміщення дає вам контроль. Використайте його. Шрифти — ідеальні кандидати для тривалого кешування.

Ігнорування юридичної та документаційної роботи

Якщо ваша політика приватності раніше згадувала Google Fonts або стороннє завантаження шрифтів, оновіть її після міграції. Якщо ви ведете інвентар обробки даних, оновіть і його. Технічна зміна та compliance-запис мають узгоджуватися.

<!-- tool-cta:start -->

💡 Спробуйте це: Перетворіть файли TTF, які ви завантажили з Google Fonts, на WOFF2 для самостійного хостингу плюс CSS за допомогою Webfont Generator.

<!-- tool-cta:end -->

Простий чекліст міграції

1. Перелічіть сімейства шрифтів, насиченості, стилі та писемності, які ви справді використовуєте.
2. Завантажте файли WOFF2 і підтвердьте ліцензію.
3. Підмножуйте шрифти, якщо сайт має обмежені мовні потреби.
4. Додайте локальні правила @font-face з font-display: swap.
5. Видаліть усі посилання Google Fonts link, preconnect і @import.
6. Віддавайте шрифти з власного домену з довготривалими заголовками кешування.
7. Preload лише найважливіший шрифт above-the-fold, якщо тестування це підтверджує.
8. Перевірте в DevTools, що запитів до Google Fonts більше немає.
9. За потреби оновіть документацію з приватності.

Самостійне розміщення шрифтів — не гламурна робота. Це невелике інфраструктурне прибирання, яке зменшує ризик залежностей, покращує підхід до приватності та дає передбачуваніший рендеринг. Зазвичай це варте однієї-двох годин роботи.