Володимир Шайтан Senior Full Stack Developer у UKEESS Software House, Викладач Комп'ютерної школи Hillel.

Кожного разу, коли працюєш зі шрифтами, починаєш нервувати? Це нормально, тема шрифтів, їх роботи та підключення не зовсім проста. Хоча, завжди ж можна під'єднати шрифт через Google Fonts і бути щасливим(ою). Але звісно, краще розуміти, як то працює, тоді й труднощів буде менше, і на співбесіді не впадеш у ступор. А може й оптимізацію своїх проєктів проведеш, адже оптимізація — це завжди добре.

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

ЩО ТАКЕ ШРИФТ?

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

Основні характеристики шрифтів:

Сімейство (font-family): це загальна група шрифтів зі схожим дизайном. Наприклад, Arial, Roboto, Times New Roman.
Стиль (font-style): визначає нахил шрифту. Наприклад, нормальний (normal), курсив (italic), або похилий (oblique).
Вага (font-weight): відображає товщину символів. Це може бути 400 (звичайний), 700 (жирний), або будь-яке інше значення.
Розмір (font-size): визначає висоту символів і зазвичай задається в пікселях (px), точках (pt), відсотках (%) або em.
Висота рядка (line-height): відстань між базовими лініями сусідніх рядків тексту.

Шрифти бувають двох основних типів:

З засічками (Serif): наприклад, Times New Roman. Вони мають маленькі лінії або декоративні елементи на кінцях символів.
Без засічок (Sans-serif): наприклад, Arial чи Roboto. Вони не мають додаткових ліній, виглядають більш сучасно та чисто.

А тепер зануримось у роботу браузера.

ЯК ЗАВАНТАЖУЮТЬСЯ ШРИФТИ У БРАУЗЕРІ?

Перш ніж розглянути способи підключення, варто розібратись, як браузер завантажує шрифти. Коли браузер відкриває вебсторінку, він завантажує HTML-документ і починає обробку стилів (CSS). Коли він стикається з правилами підключення шрифтів (через <link>, @import або @font-face), браузер робить запит на сервер, щоб отримати файли шрифтів. Цей процес може затримати відображення тексту на сторінці, особливо якщо шрифти підвантажуються з зовнішніх ресурсів.

Є три основні стани, через які проходить текст під час завантаження шрифтів:

Invisible Text (FOIT — Flash of Invisible Text): текст невидимий, поки шрифт не буде завантажено.
Fallback Text (FOUT — Flash of Unstyled Text): спочатку використовується резервний шрифт, а після завантаження основного тексту — змінюється.
Flash of Faux Text (FOFT): браузер намагається візуально підлаштувати схожий шрифт до того моменту, як завантажиться основний.

Щоб поліпшити цей процес, потрібно знати різні способи підключення шрифтів.

СПОСІБ 1: ПІДКЛЮЧЕННЯ ЧЕРЕЗ GOOGLE FONTS АБО ІНШІ СТОРОННІ СЕРВІСИ

1. Використання тегу <link>

Один із найпопулярніших способів — підключення через Google Fonts. Усе, що потрібно — додати в HTML наступний рядок:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" />

2. Використання @import

Альтернативний спосіб — підключення через CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Плюси та мінуси:

ПЛЮСИ	МІНУСИ
Легке підключення	Довший час завантаження через зовнішні ресурси
Велика бібліотека шрифтів	Залежність від стороннього сервісу

Використання preload і preconnect

Щоб поліпшити швидкість завантаження, додайте наступні рядки у <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" as="style" />

Це дозволяє браузеру заздалегідь встановити з'єднання з сервером і завантажити шрифти без затримок.

Як кешується Google Fonts?

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

СПОСІБ 2: ЛОКАЛЬНЕ ПІДКЛЮЧЕННЯ ЧЕРЕЗ @font-face

Іноді ти отримуєш файли шрифтів від дизайнера або завантажуєш їх самостійно. У такому випадку використовується @font-face. Рекомендується використовувати кілька форматів для кращої підтримки браузерами: .woff, .woff2, .ttf.

@font-face {
   font-family: 'MyFont';
   src: url('/fonts/MyFont.woff2') format('woff2'),
   url('/fonts/MyFont.woff') format('woff'),
   url('/fonts/MyFont.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

Що таке font-display?

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

Плюси та мінуси:

ПЛЮСИ	МІНУСИ
Повний контроль над шрифтами	Довший початковий час налаштування
Підтримка офлайн-завантаження	Можливі проблеми з кешуванням

Оптимізація кешування локальних шрифтів

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

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

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

СПОСІБ 3: ВИКОРИСТАННЯ СИСТЕМНИХ ШРИФТІВ

Іноді найефективніший спосіб — взагалі не завантажувати шрифти. Системні шрифти вже є в кожного користувача, і вони відображаються миттєво. Ось як можна під'єднати системний:

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Плюси та мінуси:

ПЛЮСИ	МІНУСИ
Миттєве відображення тексту	Обмежений вибір стилю
Відсутність затримок при завантаженні	Не унікальний вигляд

ФОРМАТ ШРИФТІВ

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

Трохи документації:

1. TrueType Fonts (.ttf)

Що це: один із найстаріших форматів шрифтів, розроблений Apple і Microsoft. Він підтримує високу якість відображення на екрані та в друкованих матеріалах.
Підтримка браузерами: майже всі сучасні браузери підтримують .ttf, але цей формат менш оптимізований для вебвикористання.
Переваги: простий у використанні, висока сумісність.
Недоліки: великі файли, відсутність стиснення, що впливає на швидкість завантаження.

2. OpenType Fonts (.otf)

Що це: поліпшений формат на основі TrueType, розроблений Adobe та Microsoft. Має більше можливостей для типографіки (додаткові символи, лігатури).
Підтримка браузерами: широко підтримується, але .woff і .woff2 усе ж краще підходять для веб.
Переваги: більша функціональність, гнучкість у створенні символів.
Недоліки: не стискається для веб, що може впливати на швидкість завантаження.

3. Web Open Font Format (.woff)

Що це: створений спеціально для використання в інтернеті, включає стиснення та метадані.
Підтримка браузерами: всі сучасні браузери (Chrome, Firefox, Safari, Edge) підтримують .woff.
Переваги: оптимізований для веб, містить метадані.
Недоліки: у деяких випадках трохи більший за .woff2.

4. Web Open Font Format 2.0 (.woff2)

Що це: удосконалена версія .woff з кращим стисненням та оптимізацією.
Підтримка браузерами: усі сучасні браузери підтримують .woff2, і цей формат став стандартом для вебшрифтів.
Переваги: найменший розмір файлу, найкраща оптимізація для веб.
Недоліки: не підтримується в старих браузерах (наприклад, деяких версіях Internet Explorer).

5. Embedded OpenType (.eot)

Що це: формат, створений спеціально для Internet Explorer. Використовувався до появи .woff і .woff2.
Підтримка браузерами: переважно підтримується тільки в старих версіях Internet Explorer.
Переваги: сумісність зі старими версіями IE.
Недоліки: не підтримується сучасними браузерами, великий розмір файлу.

6. Scalable Vector Graphics Fonts (.svg)

Що це: формат шрифтів у вигляді векторної графіки. Використовувався в ранніх версіях iOS.
Підтримка браузерами: підтримується в деяких браузерах, але його використовують рідко.
Переваги: може бути анімований і модифікований за допомогою CSS.
Недоліки: не підходить для сучасного вебвикористання, більший розмір файлу.

Для розробки сучасних вебсайтів найкраще підходять формати .woff2 та .woff.

Чому .woff2 — найкращий вибір?

Оптимізований для веб: .woff2 забезпечує найкраще стиснення, що зменшує розмір файлу шрифту й прискорює завантаження сторінки.
Широка підтримка браузерами: цей формат підтримується всіма сучасними браузерами (Chrome, Firefox, Safari, Edge), що робить його універсальним для більшості користувачів.
Висока продуктивність: оскільки .woff2 стискає шрифти набагато краще, ніж інші формати, це зменшує обсяг даних, які браузер повинен завантажити, що позитивно впливає на швидкість завантаження сторінки.

Чому .woff теж варто використовувати?

Сумісність зі старішими браузерами: .woff добре підтримується навіть у старіших версіях браузерів, таких як Internet Explorer 9+. Це важливо, якщо ви прагнете забезпечити підтримку ширшої аудиторії, яка може використовувати застаріле програмне забезпечення.

Отже, найкращий підхід:

Основний формат: використовуй .woff2 для всіх сучасних браузерів.
Резервний формат: додай .woff для кращої сумісності зі старими браузерами.

ПІДТРИМКА ФОРМАТІВ ШРИФТІВ У БРАУЗЕРАХ

БРАУЗЕР	.woff2	.woff	.ttf / .otf	.eot	.svg
Chrome	36+	5+	усі версії	—	4-37 (до 37 версії)
Firefox	39+	3.6+	усі версії	—	4-38 (до 38 версії)
Safari	10+	10+	усі версії	—	3.1-9
Edge	14+	14+	усі версії	—	—
Internet Explorer	—	9+	усі версії	6-8	—
Opera	26+	11.1+	усі версії	—	до 25 версії

Конвертація шрифтів

Якщо у тебе є шрифти у форматах .ttf або .otf, і ти хочеш використовувати їх на своєму сайті, краще конвертувати їх у .woff та .woff2 для оптимізації та кращої підтримки сучасними браузерами.

Сервіси для конвертації шрифтів:

Transfonter (безкоштовний онлайн-конвертер) дозволяє конвертувати шрифти у формати .woff та .woff2, налаштовувати підключення через @font-face та стискати файли.
FontSquirrel дозволяє конвертувати шрифти у різні формати з різними параметрами стиснення та опціями оптимізації.
OnlineFontConverter підтримує різні формати, дозволяє конвертувати шрифти й завантажувати їх на комп'ютер.

ПОРАДИ ЩОДО ОПТИМІЗАЦІЇ

1. Завжди вказуй кілька форматів шрифтів у правилі @font-face:

@font-face {
   font-family: 'CustomFont';
   src: url('/fonts/CustomFont.woff2') format('woff2'), /* сучасні браузери */
   url('/fonts/CustomFont.woff') format('woff');   /* старі браузери */
   font-weight: normal;
   font-style: normal;
}

2. Використовуй font-display: swap

У правилі @font-face додавай властивість font-display: swap, щоб текст відображався резервним шрифтом, поки основний шрифт завантажується. Це дозволить користувачам бачити контент швидше, навіть якщо шрифт ще не встиг завантажитися.

@font-face {
   font-family: 'MyFont';
   src: url('/fonts/MyFont.woff2') format('woff2');
   font-display: swap;
}

3. Обмежуй кількість шрифтів і жирність

Що більше шрифтів і різних варіацій, то більше часу витрачається на завантаження. Старайся використовувати максимум 2-3 різні шрифти та 2-3 варіації жирності (наприклад, 400, 700).

4. Використовуй preconnect і preload для прискорення завантаження

Додавання preconnect і preload у <head> дозволяє браузеру встановлювати з'єднання з сервером заздалегідь і швидше завантажувати шрифти.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="/fonts/MyFont.woff2" as="font" type="font/woff2" crossorigin>

5. Кешування шрифтів

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

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

Це дозволить зберігати шрифти в кеші браузера до року.

6. Зведи до мінімуму використання @import

Використання @import для підключення шрифтів уповільнює завантаження, оскільки браузер починає обробку цього запиту лише після завантаження CSS-файлу. Замість цього використовуйте тег <link> у <head> для підключення шрифтів.

7. Підтримуй лише необхідні символи (Subsetting)

Якщо тобі потрібна лише частина символів (наприклад, лише латинські), скористайся сервісами, які дозволяють видалити зайві символи зі шрифту. Це зменшить розмір файлу. Наприклад, у Google Fonts можна вибирати лише потрібні набори символів.

<link href="https://fonts.googleapis.com/css2?family=Roboto&subset=latin" rel="stylesheet"/>

8. Застосовуй резервні шрифти (Fallback fonts)

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

body {
   font-family: 'Roboto', Arial, sans-serif;
}

9. Використовуй локальні шрифти

Якщо ти підключаєш популярні шрифти, наприклад, Roboto або Open Sans, вкажи спочатку локальний варіант. Це допоможе браузеру використовувати вже встановлений на пристрої користувача шрифт і уникнути повторного завантаження.

@font-face {
   font-family: 'Roboto';
   src: local('Roboto'), url('/fonts/Roboto.woff2') format('woff2');
}

10. Відстежуй продуктивність шрифтів

Використовуй інструменти, як-от Google Lighthouse або WebPageTest, щоб перевірити, як шрифти впливають на швидкість завантаження сайту. Це допоможе визначити вузькі місця та покращити продуктивність.

ВИСНОВОК

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

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

Робота зі шрифтами у вебі

Рекомендуємо публікації по темі

Схожі матеріали