Для подключения шрифтов через CSS можно использовать правило @font-face. Это правило позволяет загрузить шрифт на сервер и использовать его в CSS.
Для того, чтобы подключить шрифт с помощью @font-face, нужно следующее:
- Скачать и установить шрифт на сервер в формате ttf, otf, woff или woff2.
- В 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). Также нужно проверять совместимость шрифтов с разными браузерами и операционными системами.
