Как подключить шрифты в css
4 года назад
Человек-Молекула
Ответы
4
Для подключения шрифтов в CSS используется конструкция @font-face. Рассмотрим пошагово, как ей воспользоваться.
В первую очередь необходимо загрузить шрифты и поместить их в отдельную директорию внутри своего проекта. Пусть в нашем примере это будет директория project/fonts/:
project/
├── css/
│ └── style.css
├── fonts/
│ │── Roboto-Regular.ttf
│ └── Roboto-Bold.ttf
Далее заходим в наш CSS-файл style.css и прописываем конструкцию @font-face. Хорошим тоном является использование данной конструкции в самом начале CSS-файла. Конструкция @font-face принимает внутри себя 2 основных свойства, прописав которые мы и подключим необходимый нам шрифт:
font-family— имя подключаемого шрифта, по которому в дальнейшем можно будет обращаться к шрифту внутри нашего CSS-файлаsrc— путь к файлу со шрифтом
@font-face {
font-family: "Roboto Regular";
src: url("../fonts/Roboto-Regular.ttf");
}
Подключим другое начертание выбранного нами шрифта:
@font-face {
font-family: "Roboto Regular";
src: url("../fonts/Roboto-Regular.ttf");
}
@font-face {
font-family: "Roboto Bold";
src: url("../fonts/Roboto-Bold.ttf");
}
Теперь можно пользоваться данными шрифтами в CSS-файле
3 года назад
Лиза Гонцова