Вебшрифт не має дескриптора font-display

Чому це важливо

Посібник web.dev з оптимізації Cumulative Layout Shift пояснює, що поки вебшрифт завантажується, текст або показується резервним шрифтом і згодом замінюється, або малюється невидимим, доки шрифт не надійде, і що обидва варіанти можуть зсунути сторінку, коли шрифт завантажиться. Як способи зменшити цей зсув він називає font-display: optional, попереднє завантаження критичних шрифтів і коригування метрик резервного шрифту, наприклад size-adjust.

Специфікація CSS Fonts робить auto початковим значенням font-display, залишає його поведінку на розсуд браузера й зазначає, що багато браузерів поводяться як за block, коли текст спершу малюється невидимим.

Що зробити

Відкрийте знахідку: у ній показано таблицю стилів, родину шрифтів і до десяти фрагментів варіантів шрифту з їхніми джерелами та станом відповідного попереднього завантаження для кожної сторінки групи. Перегляньте повну таблицю стилів, щоб перевірити інші варіанти та декларації size-adjust, ascent-override, descent-override чи line-gap-override.
Додайте дескриптор font-display до кожного правила @font-face цієї родини. swap одразу показує текст резервним шрифтом; optional використовує вебшрифт, лише якщо він готовий вчасно, що запобігає пізнішому перекомпонуванню.
Для найважливіших шрифтів розгляньте <link rel="preload" as="font"> і коригування метрик резервного шрифту, щоб заміна була менш помітною. Їх показано як дані й засоби виправлення, а не як окремі проблеми.

Коли залишити як є: Якщо вам підходить типова поведінка браузера, наприклад для невеликого шрифту іконок, це можна залишити або оголосити font-display: auto чи block, щоб зафіксувати цей вибір: будь-яке з п’яти допустимих значень вважається оголошеним.

Що ми читаємо

Ми читаємо таблиці стилів, які перевірені сторінки підключають через <link rel="stylesheet">, використовуючи байти, збережені аудитом, — до 1 MiB на файл. Перевірка використовує спільний аналіз таблиці стилів; вона не завантажує файлів шрифтів і не рендерить сторінок.

Для кожного правила @font-face з придатними до читання font-family і src ми шукаємо рядок font-display. Повідомляється лише про його відсутність: auto, block, swap, fallback і optional усі вважаються оголошеними, яке б значення не було вибрано. Значення, яке ми не можемо прочитати, або варіант шрифту з нечіткою родиною чи джерелом позначають сторінки як неперевірені, а не чисті.

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

Приклад і докази

Ілюстративний приклад — схематичний CSS, а не реальний аудит.

Сторінка https://bakery.example/ підключає /assets/main.css і попередньо завантажує /assets/font.woff2. Таблиця стилів містить такий варіант шрифту:

@font-face {
  font-family: Demo;
  src: url(font.woff2);
  size-adjust: 98%;
}

Варіант шрифту не має рядка font-display, тому про родину Demo в цій таблиці стилів повідомляється; відповідне попереднє завантаження й size-adjust показано як дані.

@font-face {
  font-family: Demo;
  src: url(font.woff2);
  font-display: swap;
  size-adjust: 98%;
}

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

Підтвердити й перевірити знову

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

Повторна перевірка: Повний аудит — Запустіть новий повний аудит сайту. Достатня повторна перевірка тієї самої таблиці стилів і родини шрифтів може підтвердити виправлення, коли жодному варіанту цієї родини не бракує font-display. Повні докази з кожної сторінки, що раніше підключала таблицю стилів, також можуть підтвердити, що колишня родина більше не оголошена, зокрема після видалення посилання на її таблицю стилів. Відсутнє, обрізане чи непридатне до читання джерело саме по собі не доводить виправлення.

Обмеження та джерела

Ми не рендеримо сторінок, не зіставляємо селекторів, не завантажуємо шрифтів і не вимірюємо невидимого тексту, заміни шрифтів, зсуву макета чи часу завантаження, а оголошення font-display саме по собі не доводить, що сторінка стала швидшою чи стабільнішою. Таблиці стилів, підключені через @import, вбудовані блоки <style> і стилі, додані JavaScript, не читаються. Яке значення font-display підходить шрифту — ваш вибір; повідомляється лише про відсутній дескриптор. Таблиця стилів поза межами ресурсів, збережених аудитом, лишається неперевіреною.

Упевненість: Висока, бо дескриптор знаходиться чи не знаходиться безпосередньо в коді таблиці стилів.

Джерела

web.dev, Оптимізація Cumulative Layout Shift — пояснює, що і замінений резервний текст, і невидимий текст можуть зсунути сторінку, коли завантажується вебшрифт, і перелічує font-display: optional, попереднє завантаження критичних шрифтів і перевизначення метрик резервного шрифту, наприклад size-adjust, як способи зменшити зсув. Перевірено 10 жовтня 2026.
W3C, Модуль CSS Fonts рівня 4 — визначає дескриптор font-display зі значеннями auto, block, swap, fallback і optional, робить auto початковим значенням із поведінкою, визначеною браузером, і зазначає, що багато браузерів типово поводяться подібно до block. Перевірено 10 жовтня 2026.

Редакційна перевірка: 1 листопада 2026