Короткий посібник із використання API веб-шрифтів
Короткий посібник із використання API веб-шрифтів
Що таке fontAPI?
| Сервіс веб-шрифтів | Розміщена бібліотека (наприклад, GoogleFonts, AdobeFonts), яка надає фрагменти CSS <link> або JavaScript для отримання файлів шрифтів з CDN. |
| CSS@font‑face | Низькорівневий API браузера, який повідомляє агенту користувача, де завантажувати файл шрифту та яке ім’я сімейства шрифтів надавати CSS. |
| API змінних шрифтів | Новіший синтаксис (font-variation-settings, діапазони осей), який дозволяє одному файлу надавати багато стилів (товщина, ширина, нахил тощо). |
| Дескриптор відображення шрифту | Керує тим, як текст відображатиметься під час завантаження шрифту (auto, block, swap, fallback, optional). |
| Допоміжні засоби завантаження JavaScript | Додаткові помічники (конструктор FontFace, document.fonts.load()) для завантаження шрифтів на льоту або попереднього завантаження. |
Усі вони належать до сімейства «Font API», оскільки надають програмні способи запиту та використання шрифтів.
Основна термінологія CSS
| Властивість / ключове слово | Значення |
|---|---|
font-family | Ім’я, яке ви використовуєте в CSS після завантаження шрифту. |
src | URL-адреса(и) фактичного(их) файлу(ів) шрифту(ів) (.woff2, .woff, .ttf, …). |
unicode-range | Підмножина символів, що охоплюються заданим файлом – чудово підходить для підмножини. |
font-weight / font-style / font-stretch | Класичні статичні дескриптори. |
font-variation-settings | Пари ключ/значення для змінних осей ('wght' 400). |
font-display | Резервна стратегія рендерингу під час завантаження шрифту. |
Використання вбудованого CSS@font‑face (саморозміщеного)
1<!-- 1️⃣ Put the font files on your server (or CDN) -->
2<link rel="preload" href="/fonts/Inter-Variable.woff2"
3 as="font" type="font/woff2" crossorigin>
4
5<style>
6 /* 2️⃣ Declare the family */
7 @font-face {
8 font-family: 'Inter Variable';
9 src: url('/fonts/Inter-Variable.woff2') format('woff2');
10 /* Optional – load only Latin characters */
11 unicode-range: U+0000-00FF;
12 /* Show fallback text until the font is ready */
13 font-display: swap;
14 }
15
16 /* 3️⃣ Use it */
17 body {
18 font-family: 'Inter Variable', system-ui, sans-serif;
19 }
20</style>Переваги: повний контроль над кешуванням, ліцензуванням і підмножиною; працює в автономному режимі, якщо ви згрупуєте файли.
Googlefonts CSSAPI (найпоширеніший публічний API шрифтів)
1<link href="https://fonts.googleapis.com/css2?
2family=Roboto:wght@400;700&
3family=Open+Sans:ital,wght@0,400;0,600;1,400&
4display=swap"
5rel="stylesheet">Пояснення
| Частина | Що вона робить |
|---|---|
family=Roboto:wght@400;700 | Запитувати лише звичайні та жирні накреслення Roboto. |
family=Open+Sans:ital,wght@0,400;0,600;1,400 | Завантажувати звичайний/напівжирний шрифт Roman + курсив (звичайний) OpenSans. |
display=swap | Використовувати резервний текст, доки шрифти не завантажаться (рекомендовано для UX). |
Потім у CSS:
1h1 { font-family: 'Roboto', sans-serif; }
2p { font-family: 'Open Sans', sans-serif; }Поради
- Об’єднайте кілька сімей в одному запиті – зменшує кількість двосторонніх маршрутів HTTP.
- Використовуйте діапазони осей для змінних шрифтів:
family=Inter:wght@200..800.
Приклад змінного шрифту (Googlefonts)
1<link href="https://fonts.googleapis.com/css2?
2family=Inter:wght@200..800&display=swap"
3rel="stylesheet">
4
5<style>
6 .hero {
7 font-family: 'Inter', system-ui;
8 /* Animate weight from thin → bold */
9 font-variation-settings: 'wght' 200;
10 transition: font-variation-settings .6s ease;
11 }
12 .hero:hover { font-variation-settings: 'wght' 800; }
13</style>Чому це важливо: один файл замінює десятки статичних файлів .woff2 → значно менше корисне навантаження.
API завантаження шрифтів JavaScript (FontFace)
Коли використовувати – вам потрібно завантажити шрифт після завантаження сторінки (наприклад, у маршрутизації SPA) або ви хочете чекати його готовності перед відображенням інтерфейсу користувача.
1// Create a FontFace object
2const myFont = new FontFace(
3 'Custom Serif',
4 'url(/fonts/CustomSerif-VF.woff2) format("woff2")',
5 { weight: '400 900', style: 'normal' } // optional descriptors
6);
7
8// Add it to the document’s FontFaceSet
9document.fonts.add(myFont);
10
11// Start loading
12myFont.load().then(() => {
13 // Font ready → apply it
14 document.body.style.fontFamily = '"Custom Serif", serif';
15}).catch(err => console.error('Font failed', err));Ви також можете запитати, які шрифти завантажуються:
1document.fonts.ready.then(() => console.log('All fonts ready'));AdobeFonts (Typekit) – ще один публічний API шрифтів
1<link rel="stylesheet" href="https://use.typekit.net/xyz123.css">Потім посилайтеся на родини, як зазначено в наборі:
1h2 { font-family: "adobe-caslon-pro", serif; }Ключові відмінності від Googlefonts
- Потрібен обліковий запис Adobe та ідентифікатор комплекту для вбудовування (
xyz123). - Надає параметри завантаження sync і async (
<script>… Typekit.load(); </script>).
Найкращі практики продуктивності
Потрібна лише підмножина гліфів – використовуйте параметр
unicode-rangeабо параметрtext=Google Fonts.Використовуйте
preloadдля критичних шрифтів:
1<link rel="preload" href="/fonts/Inter-Variable.woff2"
2 as="font" type="font/woff2" crossorigin>Установіть
font-displayпринаймні наswap.
Уникайте «блокування» відтворення тексту, яке шкодить CLS (сукупне зміщення макета).Об’єднайте сім’ї в один запит, використовуючи GoogleFonts або AdobeFonts.
Кеш назавжди – більшість CDN надсилають заголовки
Cache‑Controlдалекого майбутнього для файлів woff2.
Шпаргалка для швидкого довідника
| API | Як запитувати | Типовий випадок використання |
|——————————————————————-|—————–|
| CSS @font-face | <style>@font-face{…}<style> + необов’язково <link rel="preload"> | Власно розміщені шрифти, повний контроль |
| Google Fonts CSS API| <link href="https://fonts.googleapis.com/css2?..."> | Безкоштовні шрифти з простими параметрами URL |
| Adobe Fonts (Typekit)| <link href="https://use.typekit.net/xxxx.css"> | Платна бібліотека з інтеграцією з дизайн-системою |
| FontFace JS API | new FontFace(name, src[, descriptors]) | Динамічне завантаження в SPA / пакетах середовища виконання |
| Змінний діапазон осей шрифтів| family=Inter:wght@200..800 або CSS font-variation-settings | Зменшення кількості файлів та забезпечення плавних переходів між накресленнями |
Зразок коду TL;DR – однорядковий для більшості проектів
1<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
2 rel="stylesheet">
3<style>
4 body {font-family:'Montserrat',Arial,sans-serif;}
5</style>✅ Завантажує лише звичайні та жирні накреслення → крихітне завантаження. ✅
display=swapгарантує швидке повернення до резервного тексту → гарний UX. ✅ Працює у всіх сучасних браузерах без додаткового JavaScript.
А як щодо Aspose?
Якщо вам потрібно маніпулювати або перетворювати файли шрифтів на стороні сервера (наприклад, генерувати підмножини, конвертувати між TTF/WOFF2 або видобувати метрики гліфів), бібліотека Aspose.Font надає програмний API для .NET, Java і Python. Його можна інтегрувати в конвеєри збірки або серверні служби, щоб підготувати активи шрифтів перед тим, як їх обслуговувати через будь-який із API шрифтів, описаних вище.
Готові використовувати?
Скопіюйте будь-який із наведених вище фрагментів у свій HTML/CSS/JS, і за лічені секунди ви отримаєте готову інтеграцію Font API. Вдалого стилю!