Как добавить шрифт в css

Чтобы добавить шрифт в CSS, необходимо выполнить несколько шагов:

1. Получить файлы шрифта

Сначала нужно получить файлы шрифта с расширением .woff или .woff2. Можно загрузить шрифты из онлайн-библиотек, таких как Google Fonts, или использовать свои собственные файлы шрифтов.

2. Разместить файлы шрифтов в проекте

Файлы скачанных шрифтов нужно разместить в нужной директории проекта, например, в папке fonts в корне проекта.

3. Создать правила в CSS для подключения шрифта

Для подключения шрифта можно использовать свойство @font-face. Например, так можно подключить шрифт семейства Montserrat:

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.woff2') format('woff2'),
       url('fonts/Montserrat-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

В этом примере создается новое правило @font-face, в котором задается название шрифта (font-family), путь к файлам шрифта (src) и значения font-weight и font-style, указывающие нормальный вес и стиль шрифта.

4. Использование шрифта в CSS

После того, как шрифт был добавлен при помощи правила @font-face, можно использовать его в остальном CSS. Например, так:

body {
  font-family: 'Montserrat', sans-serif;
}

В этом примере шрифт Montserrat будет использоваться для всего текста на странице. Если для каких-то элементов нужен другой шрифт, можно задать его отдельно.

Важно помнить, что подключение шрифтов может замедлить загрузку страницы, поэтому лучше использовать только те шрифты, которые необходимы, и оптимизировать их размеры.