Власний шрифт може зробити українську сторінку виразнішою, але додає мережевий ресурс і ще один стан завантаження. Добрий результат — не просто правильний вигляд після кількох секунд очікування. Текст має бути читабельним до приходу файлу, українські символи не повинні випадати з гарнітури, а сторінка — різко перебудовуватися без перевірки.
Почніть із необхідності та набору символів
Для довідкового сайту спочатку спробуйте системний стек: system-ui, sans-serif. Він не потребує окремого завантаження шрифту. Якщо потрібна власна гарнітура, перевірте її ліцензію саме для вебвикористання та набір символів до підключення. Наявність слова «Cyrillic» у назві файлу ще не є вашою перевіркою українського тексту.
Візьміть реальний абзац, цифри, розділові знаки та тестовий рядок «Ґрунт, Європа, їжак, Ірина, п’ять». Перегляньте звичайне й жирне накреслення. Якщо один символ виглядає інакше, браузер може підставляти його з резервної гарнітури. Обрізаний піднабір потрібно виправляти у файлі шрифту або виборі набору, а не випадковим збільшенням міжлітерних відстаней.
Опишіть саме той файл, який маєте
@font-face оголошує сімейство і джерело шрифту. Для нового проєкту доцільно почати з WOFF2 — стандартизованого формату з ефективним стисненням. Не переносьте EOT із посібників часів старих браузерів у новий шаблон автоматично. Історичні дискусії про EOT пояснюють розвиток технології, але не визначають ваш сучасний набір файлів.
@font-face {
font-family: "Site Text";
src: url("/fonts/site-text-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
body {
font-family: "Site Text", system-ui, sans-serif;
}Це приклад для одного звичайного накреслення; файл за вказаною адресою потрібно підготувати окремо. Жирний файл оголосіть іншим правилом із його реальною вагою. Діапазон ваг для змінного шрифту задавайте лише тоді, коли конкретний файл його підтримує. Так браузеру не доведеться здогадуватися, який ресурс відповідає тексту.
Свідомо виберіть поведінку до завантаження
font-display: swap дає дуже короткий період блокування, після чого використовується резервний шрифт, а завантажений може його замінити. Це допомагає рано показати текст, проте заміна гарнітури здатна змінити переноси й висоту блоків. Порівняйте рядки в обох гарнітурах: довгий заголовок, меню й кнопки часто виявляють проблему швидше за звичайний абзац.
Значення optional дозволяє обійтися без пізньої заміни після короткого початкового періоду. Вибір залежить від того, що важливіше для конкретної сторінки: гарантований фірмовий вигляд чи стабільний початковий текст. Немає потреби призначати одну стратегію всім майбутнім сайтам або обіцяти однакові часові пороги в усіх браузерах.
Не прискорюйте всі файли одночасно
Попереднє завантаження може допомогти одному справді потрібному шрифту першого екрана. Для нього href має збігатися з CSS, а параметри запиту — з подальшим завантаженням. Для шрифтового preload використовують as="font", відповідний тип і crossorigin, навіть коли файл розташований на тому самому джерелі.
<link rel="preload" href="/fonts/site-text-regular.woff2"
as="font" type="font/woff2" crossorigin>Не додавайте preload для кожної ваги про запас: зайві ранні запити змагаються з потрібними ресурсами. Спочатку перевірте, чи справді шрифт використовується, чи немає дубльованих адрес і чи виправдовує зміна результат у мережевій панелі.
- Українські символи та потрібні накреслення перевірені на реальному тексті.
- Ліцензія дозволяє розміщення файлу на сайті.
- Сторінка читається, коли запит шрифту заблокований або повільний.
- Після завантаження не обрізаються заголовки, кнопки й меню.
- Попереднє завантаження не створює дубльованого запиту.
Перевіряйте холодне завантаження, а потім повторне відкриття з кешем. Якщо сторінка виграє лише в одному з цих випадків, це ще не причина ускладнювати схему. Для невеликого текстового сайту одна гарнітура з двома потрібними накресленнями часто є зручнішою початковою домовленістю, ніж каталог файлів без виміряної користі.