Шрифти
Властивість font-family задає шрифт тексту елемента. Через кому можна перерахувати довільну кількість шрифтів, які браузер спробує знайти в системі користувача та застосувати. Браузер буде шукати шрифти зліва направо та застосує перший знайдений.
В кінці списку завжди вказується сімейство шрифтів, на випадок, якщо жодного перерахованого шрифту не знайдено. Тоді застосовується стандартний (безпечний) шрифт із цього сімейства, який вже є вбудований в браузер користувача.
p { font-family: 'Helvetica Neue', 'Roboto', 'Verdana', 'Tahoma', sans-serif; }
Підключення шрифтів з інтернет
Гугл-ресурс с внешними шрифтами Після вибору на сайті потрбного шрифта - додаємо посилання коди у head HTML s CSS. Наприклад.
- HTML
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
- CSS
body { font-family: 'Roboto', sans-serif; }
Підключення шрифтів локальних з файлів
- Створюємо у проекті папку fonts
- Копіюємо у нього потрібний шрифт
- У файл css підключаємо егог через директиву font-face надаючи внутрішне імя шрифту як нам зручно
@font-face { font-family: my-name-font; src: url(../fonts/Montserrat-Regular.ttf); }
Підключення шрифтів через імпорт CSS
Довше працює, старий варінт
Описи сімейств шрифтів
- serif - сімейство шрифтів з засічками (черточки на буквах)
- sans-serif - сімейство шрифтів без засічок