Главная страница » Прочие материалы » Как подключить шрифт на сайт в CSS

Календарь

« Апрель 2024 »
Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Как подключить шрифт на сайт в CSS

Автор: administrator Дата: 3-11-2018, 17:40 Категория: Прочие материалы

Подключение нового шрифта на сайт не самая простая задача. Где выбрать, скачать и как подключить шрифт на сайт в CSS? В этой статье мы покажем один из самых удобных способов установки и подключения шрифта на сайт.

Как подключить шрифт на сайт в CSS

Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках(h1) нашего сайта. Для этого выполняем следующие действия:

1. В корневой папке сайта создаём папку «fonts» и копируем туда наш Raleway.ttf;
2. В самом низу файла стилей(style.css) прописываем правило:


@font-face {
    // название шрифта(чтобы не запутаться лучше указать название папки со шрифтом) 
    font-family: "RalewayRegular"; 
    // адрес шрифта и тип 
    src: url("../fonts/RalewayRegular.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: normal; 
}

3. А также в файле стилей задаём правило для всех заголовков:


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; 
}

Также Вы могли заметить, что есть разные форматы шрифтов - .ttf, .woff, .eot, .svg и др. Еще существует формат для современных браузеров .woff2 , но о нем мы расскажем в одной из следующих статей. Обычно каждый шрифт подключается сразу в 3х форматах. Это сделано, чтобы шрифт правильно отображался во всех браузерах в т.ч. и старых. Выглядит это так:


@font-face {
    font-family: "RalewayRegular"; 
    src: url("../fonts/RalewayRegular/RalewayRegular.eot"); 
    src: url("../fonts/RalewayRegular/RalewayRegular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/RalewayRegular/RalewayRegular.woff") format("woff"), 
    url("../fonts/RalewayRegular/RalewayRegular.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: normal; 
}

Здесь следует обратить внимание на порядок подключения — это важно!

Не будем вдаваться в подробности, просто запомните вид этой конструкции.

Если у вас есть шрифт только в одном формате, то воспользуйтесь различными конверторами шрифтов. Вот один из них.

Как подключить шрифт с помощью сторонних сервисов

Можно воспользоваться сервисом fonts4web для подключения шрифтов:

1. Находим нужный шрифт или выбираем из уже имеющихся;

2. Скачиваем архив и добавляем его в папку fonts;

3. Копируем уже готовый CSS-код для файла style.css;

Готово!

Просмотров: 1 247 Напечатать Жалоба

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.