====== Шрифти ======
Властивість font-family задає шрифт тексту елемента. Через кому можна перерахувати довільну кількість шрифтів, які браузер спробує знайти в системі користувача та застосувати. Браузер буде шукати шрифти зліва направо та застосує перший знайдений.

В кінці списку завжди вказується сімейство шрифтів, на випадок, якщо жодного перерахованого шрифту не знайдено. Тоді застосовується стандартний  (безпечний) шрифт із цього сімейства, який вже є вбудований в браузер користувача.

<code>
p {
  font-family: 'Helvetica Neue', 'Roboto', 'Verdana', 'Tahoma', sans-serif;
}
</code>
===== Підключення шрифтів з інтернет =====
[[https://fonts.google.com/|Гугл-ресурс с внешними шрифтами]]
Після вибору на сайті потрбного шрифта - додаємо посилання коди у head HTML s CSS. Наприклад.

  * **HTML**
<code>
<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">
</code>

  * **CSS**
<code>
body {
font-family: 'Roboto', sans-serif;
}
</code>
===== Підключення шрифтів локальних з файлів=====
  * Створюємо у проекті папку fonts
  * Копіюємо у нього потрібний шрифт
  * У файл css підключаємо егог через директиву font-face надаючи внутрішне імя шрифту як нам зручно
<code>
@font-face {
    font-family: my-name-font;
    src: url(../fonts/Montserrat-Regular.ttf);
}
</code>
===== Підключення шрифтів через імпорт CSS =====
Довше працює, старий варінт



===== Описи сімейств шрифтів =====
  * **serif** - сімейство шрифтів з засічками (черточки на буквах)
  * **sans-serif** - сімейство шрифтів без засічок