📌 Що таке веб-шрифт?
Веб-шрифт — це шрифт, який завантажується на сторінку користувача, щоб сторінка виглядала однаково на всіх пристроях, навіть якщо потрібного шрифту немає у системі.
⚙️ Основні способи підключення
1️⃣ Стандартні системні шрифти
Використовуються шрифти, які вже встановлені на комп’ютері користувача (Arial, Times New Roman, Verdana).
body {
font-family: Arial, sans-serif;
}
👉 Плюс: швидко завантажується, сумісність гарантована.
👉 Мінус: дизайн обмежений, зовнішній вигляд залежить від ОС.
2️⃣ Вбудовані шрифти через CSS (@font-face)
Завантажуєш шрифт із сервера.
@font-face {
font-family: "MyFont";
src: url("fonts/MyFont.woff2") format("woff2"),
url("fonts/MyFont.woff") format("woff");
}
body {
font-family: "MyFont", sans-serif;
}
Формати: WOFF2, WOFF, TTF, OTF.
👉 Плюс: повний контроль над дизайном.
👉 Мінус: шрифти треба оптимізувати, щоб не сповільнювати сайт.
3️⃣ Підключення через сервіси (Google Fonts, Adobe Fonts)
Google Fonts — безкоштовно, просто вставляєш <link> у <head>.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
body {
font-family: 'Roboto', sans-serif;
}
Adobe Fonts — через підключення JavaScript або CSS.
👉 Плюс: величезна бібліотека, легке використання.
👉 Мінус: залежність від зовнішніх сервісів, іноді довше завантажується.
🛠️ Поради для веб-шрифтів
⚡ Оптимізація: використовуйте формати WOFF2 для швидкого завантаження.
🖥️ Fallback шрифти: завжди вказуйте запасний шрифт (sans-serif, serif).
📏 Вага та стиль: підключайте тільки потрібні ваги (400, 700), щоб не перевантажувати сайт.
🌐 Display property: swap забезпечує швидкий показ тексту під час завантаження шрифту.
📱 Адаптивність: перевіряйте, як шрифт виглядає на різних екранах.
🎯 Висновок
Підключення шрифтів — це баланс між дизайном і швидкістю завантаження.
Для простих сайтів підійдуть системні шрифти.
Для стильних сучасних — веб-шрифти через Google Fonts або @font-face.
Завжди пам’ятайте про fallback і оптимізацію, щоб сторінка була красивою та швидкою.
