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

Шаблон, який постійно повторюється

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

• Шість-десять файлів шрифтів, завантажених на головній сторінці
• Усі вони у WOFF2 (добре), але без стратегії font-display (погано)
• Кілька насиченостей і стилів, які ніде на сторінці не використовуються
• Увесь стек подається з домену третьої сторони (зазвичай Google Fonts) з усіма витратами на DNS, TLS і приватність, які з цього випливають
• Немає підмножин через unicode-range, тож кожен відвідувач завантажує гліфи кирилиці та грецької, навіть якщо сторінка англійською

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

Виправлення не екзотичне. Це кілька добре відомих технік, які роками існують у браузерах.

Використовуйте один варіативний шрифт замість шести статичних

Якщо ви завантажуєте Inter Regular, Inter Medium, Inter SemiBold, Inter Bold і їхні курсиви, ви завантажуєте приблизно вшестеро більше байтів, ніж потрібно. Один варіативний шрифт Inter покриває всю вісь насиченості (і нахил, у деяких збірках) в одному файлі, який лише трохи більший за дві статичні насиченості.

Питання підтримки браузерами давно закрите — варіативні шрифти працюють усюди, де це має значення. Залишкове вагання здебільшого є успадкованою м’язовою пам’яттю з епохи статичних шрифтів.

Практичне правило: один файл варіативного шрифту на писемність, на родину. Латиниця в одному файлі, кирилиця в іншому, грецька в третьому, завантажені умовно через unicode-range. І все.

Встановіть розумний font-display

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

Додайте це до кожного правила @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap одразу показує резервний шрифт і підміняє його кастомним, коли той завантажиться. Користувач може читати сторінку з нульової мілісекунди. Компроміс — короткий зсув макета під час підміни, який ви пом’якшуєте наступною технікою.

Узгодьте метрики резервного шрифту

Спалах нестилізованого тексту здається різким лише тоді, коли резервний і кастомний шрифти мають дуже різні метрики. Сучасний CSS виправляє це за допомогою size-adjust, ascent-override та споріднених властивостей:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Коли метрики резервного шрифту налаштовані, підміна майже непомітна — слова займають той самий горизонтальний простір до і після появи кастомного шрифту.

Робота Google над --allow-fallback-font-metrics тепер входить до базової підтримки браузерів, а також є ланцюжок інструментів (бібліотека fontaine та подібні), який за секунди обчислює правильні числа.

Розміщуйте шрифти самостійно

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

1. Друге TLS-рукостискання. Навіть з HTTP/3 та об’єднанням з’єднань додаткове джерело рідко буває безкоштовним.
2. Питання приватності та відповідності вимогам. Кілька європейських судів постановили, що завантаження Google Fonts з fonts.gstatic.com є передаванням персональних даних (IP-адреси) третій стороні. Самостійне розміщення повністю прибирає це питання.

Процес завантаження й розміщення такий:

1. Отримайте файл WOFF2 (варіативну збірку, якщо вона існує)
2. Залиште в ньому лише ті писемності, які ваша аудиторія справді використовує
3. Віддавайте його з того самого джерела, що й решту сайту, з довгим Cache-Control: max-age=31536000, immutable
4. Попередньо завантажте найкритичнішу насиченість: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Це весь процес. Для наявного сайту це займає один день, і ви майже ніколи не повертаєтеся назад.

Коли варто повністю відмовитися від кастомних шрифтів

Варто сказати прямо: не кожному сайту потрібен кастомний шрифт. Системний стек шрифтів тепер справді красивий у кожній операційній системі:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

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

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

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

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

Чесний підсумок

Для типового невеликого сайту чотири кроки охоплюють усю історію продуктивності вебшрифтів:

1. Один варіативний шрифт на родину та писемність
2. font-display: swap з узгодженими метриками резервного шрифту
3. Самостійне розміщення з довгими заголовками кешування та preload для критичної насиченості
4. Або повна відмова від шрифтів і використання системного стеку

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