Як прискорити Google шрифти?

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

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

До недавнього часу у нас не було контролю над тим, як відображаються веб-шрифти або як працюють резервні шрифти. Не переживайте, font-display спеціально придуманий, щоб врятувати нас. Що це? Чи працює це з Google Fonts? Давайте розберемося.

Нещодавно компанія Google оголосила, що їх служба шрифтів тепер буде підтримувати «font-display». Ця можливість вирішує ряд проблем з продуктивністю.

Якщо у користувача немає використовуваного на сайті шрифту, встановленого на його пристрої, то, браузер зазвичай завантажує вказаний шрифт, використовуючи розташування font-face src. Eсли це не вдалося або шрифт завантажується повільно, то більшість браузерів реалізують тайм-аут, під час якого буде використовуватися резервний шрифт (зазвичай шрифти за замовчуванням). Це корисний метод, але, на жаль, кожен браузер відрізняється по його фактичної реалізації.

Наприклад: Chrome і інші браузери на базі Chromium і Firefox мають секундний тайм-аут, Internet Explorer має нульовий тайм-аут, Safari не визначив тайм-аут.

1. Блокування шрифтів. Протягом цього періоду, якщо гарнітура шрифту не завантажена, будь-який елемент, який намагається його використовувати, повинен натомість визуализироваться за допомогою системного шрифту. Якщо гарнітура шрифту успішно завантажується в протягом періоду блоку, тоді грань шрифту використовується нормально.
2. Заміна шрифту: відбувається відразу після періоду блокування шрифту. Протягом цього періоду, якщо шрифт не завантажений, будь-який елемент, який намагається його використовувати, повинен натомість відображатися за допомогою системного шрифту. Якщо шрифт успішно завантажується в протягом періоду підкачки, тоді шрифт використовується нормально.
3. Помилка шрифту: відбувається відразу після заміни шрифту. Якщо файл шрифту ще не завантажений, коли починається цей період, він позначається як невдала завантаження. В іншому випадку, шрифт використовується і відображається нормально.

Щоб працювати з «font-display», добавте це правило @font-face, як показано нижче.

@font-face {
  font-family: "Arvo";
  font-display: auto;
  src: url("...");
}

«font-display» підтримує наступні значення: auto | block | swap | fallback | optional.

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

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

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

fallback : шрифт спочатку відображається з затримкою, якщо він не завантажений, але шрифт замінюється відразу після завантаження. Однак, якщо пройде дуже багато часу, запасний варіант буде використовуватися до перезавантаження сторінки. Fallback – хороший вихід для таких випадків, як основний текст, де ви хочете, щоб користувач почав читати якомога швидше.

optional : це дає шрифту надзвичайно малий період блоку (в більшості випадків рекомендується 100 мс або менше) і період свопу з нульовою затримкою. Це хороший вибір, коли завантажується шрифт більш приємний, але не критичний для відображення.

Тепер ви знаєте, як прискорити відображення веб-шрифтів, пробуйте.