Подключение шрифтов в CSS

Подключение шрифтов в CSS происходит с помощью свойства `@font-face`, которое позволяет задать настройки для загружаемого шрифта. Это свойство позволяет передать путь к файлу со шрифтом, тип файла и выбрать имя для этого шрифта.

Ниже приведен пример кода, который иллюстрирует подключение шрифта в CSS:

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

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

В этом примере мы используем шрифт Open Sans, который мы загружаем из файлов woff2 и woff. Обратите внимание, что мы указываем формат каждого файла с помощью свойства `format`. Это важно, так как браузер будет использовать первый доступный формат.

Затем мы указываем `font-family` для загруженного шрифта. Мы используем его в свойстве `font-family` для тега `body`, чтобы применить шрифт к всему содержимому веб-страницы.

Кроме того, вы можете использовать несколько шрифтов и задать настройки для каждого из них:

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

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
       url('fonts/OpenSans-Bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

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

Здесь мы используем два шрифта Open Sans с разным весом - обычным и жирным. Мы задаем настройки для каждого шрифта и используем их в свойстве `font-family` для тега `body`.

В заключение, подключение шрифтов в CSS - это важный элемент создания уникальных и эффективных веб-сайтов. Используйте свойство `@font-face`, чтобы подключить нужный вам шрифт и задать настройки для его использования на вашем веб-сайте.