Подключение нового шрифта на сайт не самая простая задача. Где выбрать, скачать и как добавить шрифт на сайт в CSS? В этой статье мы покажем один из самых удобных способов установки и подключения шрифта на сайт.
Добавление шрифта на сайт или блог
Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках (h1) нашего сайта или блога. Для этого выполняем следующие действия:
❶ В корневой папке сайта создаём папку «fonts» и копируем туда наш Raleway.ttf;
❷ В самом низу файла стилей(style.css) прописываем правило:
❶ В корневой папке сайта создаём папку «fonts» и копируем туда наш Raleway.ttf;
❷ В самом низу файла стилей(style.css) прописываем правило:
@font-face {
// название шрифта(чтобы не запутаться лучше указать название папки со шрифтом)
font-family: "RalewayRegular";
// адрес шрифта и тип
src: url("../fonts/RalewayRegular.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
❸ А также в файле стилей задаём правило для всех заголовков:
h1{
font-family: "RalewayRegular";
}Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом. Если вы хотите подключить несколько шрифтов(или их начертаний), то просто добавьте их под предыдущим:
@font-face {
font-family: "RalewayRegular";
src: url("../fonts/RalewayRegular.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
@font-face{
font-family: "RalewayBold";
src: url("../fonts/RalewayBold.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}Скачать отличные русские шрифты для своего ресурса вы можете на нашем сайте: Раздел Все для вебмастера ⇒ ⇓ Шрифты для сайта.
Visited 109 times, 1 visit(s) today
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.