Шрифти відіграють важливу роль у створенні унікального дизайну веб-сайту. Вони допомагають виділити заголовки, підзаголовки та тексти, роблячи контент більш читаним та привабливим. В даний час одним з найпопулярніших і найзручніших інструментів для підключення шрифтів є Google Fonts.
Google Fonts пропонує величезний вибір безкоштовних шрифтів, які можна використовувати на своєму сайті. Кожен шрифт має своє унікальне URL-посилання, за яким його можна підключити до CSS файлу. Це дозволяє вибрати потрібний шрифт і налаштувати його на своєму сайті всього за кілька простих кроків.
Для підключення шрифтів Google Fonts достатньо додати спеціальний код до CSS-файлу вашого сайту. Спочатку потрібно додати URL-посилання на потрібний шрифт за допомогою правила @import. Потім у властивості font-family вказати назву шрифту.
Підключення шрифтів Google Fonts до файлу CSS дозволяє встановлювати різні параметри для шрифту, наприклад, розмір, жирність, зображення та багато іншого. Це дає можливість створювати унікальні стилі для кожного елемента на сайті і робити його привабливішим і користувач-френдлі.
| № | Найменування шрифту | Приклад використання | додаткова інформація |
|---|---|---|---|
| 1 | Roboto | Приклад тексту | Один із найпопулярніших шрифтів на Google Fonts. Можна використовувати як основний шрифт для текстового контенту. |
| 2 | Open Sans | Приклад тексту | Шрифт із гарною читальністю. Підходить для використання в заголовках та параграфах. |
| 3 | Montserrat | Приклад тексту | Цей шрифт має різні ваги та стилі, що дозволяє створювати цікаві комбінації для заголовків та акцентів. |
| 4 | Merriweather | Приклад тексту | Шрифт із класичним стилем, який добре поєднується з іншими шрифтами та підходить для використання у параграфах. |
Як підключити шрифт CSS із Google Fonts?
Перейдіть до Тільди → Налаштування сайту → Шрифти та кольори → Розширені налаштування → Google Fonts і поставте посилання в полі CSS link.
Як підключити завантажені шрифти до CSS?
Для підключення шрифтів у CSS використовується правило @font-face . У ньому обов'язково використовують дві властивості: font-family — тут вказується назва шрифту, під яким він використовуватиметься у проекті src — шлях до шрифту.
Як встановити шрифт із Google Fonts?
У нижній частині меню шрифтів натисніть Інші шрифти. Завантажиться каталог Google Fonts. Щоб завантажити більше шрифтів, прокрутіть вниз. Щоб знайти шрифт, введіть назву у полі пошуку