Як підключити багато шрифтів css: докладна інструкція та приклади

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

Першим способом є підключення шрифтів за допомогою зовнішніх файлів. Ви можете завантажити шрифти, які вам подобаються, і зберегти їх в окремій папці на вашому сервері. Потім ви можете підключити ці файли у своєму CSS-коді за допомогою @font-face правила. Це дозволяє вашому сайту використовувати ці шрифти в будь-якому місці, де ви вкажете їхнє ім’я.

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

Назва шрифтуПосилання на шрифт
Roboto https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
montserrat https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap
open Sans https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap
lato https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap

Як додати кілька шрифтів у CSS?

У правій панелі Selected family перейдіть на вкладку Embed. Скопіюйте посилання на CSS , в якому вказані обидва шрифти . Вставте посилання в поле CSS link на вкладці Google Fonts. Пропишіть назви шрифтів і збережіть зміни.

Як використовувати 2 шрифти в CSS?

У CSS існує кілька способів підключити шрифти. Один із найпопулярніших – використовувати правило @font-face , яке дає змогу завантажувати користувацькі шрифти та використовувати їх на веб-сторінці. Для цього потрібно надати шлях до шрифту і вказати його ім’я. Потім можна використовувати це ім’я у властивості font-family.

Як підключити шрифти з папки CSS?

Створіть папку в проєкті та помістіть у неї завантажений шрифт Переконайтеся, що файл шрифту має правильне розширення, таке як . ttf (TrueType Font) або . woff/woff2 (Web Open Font Format). Коли ви помістите шрифт у папку “fonts”, він буде доступний для використання через CSS і @font-face селектор .