Как подключить шрифты через CSS

Для подключения шрифтов через CSS можно использовать правило @font-face. Это правило позволяет загрузить шрифт на сервер и использовать его в CSS.

Для того, чтобы подключить шрифт с помощью @font-face, нужно следующее:

1. Скачать и установить шрифт на сервер в формате ttf, otf, woff или woff2.
2. В CSS создать правило @font-face с указанием пути к файлу шрифта, его названия и параметров.

Например, чтобы подключить шрифт Lato-Regular.ttf, можно использовать следующее правило @font-face:

@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

В этом примере мы указываем, что шрифт имеет название Lato и вес 400 (обычный), а также что он содержится в файле Lato-Regular.ttf по относительному пути fonts/. Формат truetype сообщает браузеру, что это шрифт TrueType.

Далее, чтобы применить этот шрифт к тексту, можно использовать свойство font-family и задать значение Lato:

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

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

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