15) Вёрстка шапки, шрифты

Макет КЛИК
Шрифты от Google — https://fonts.google.com/
Веб-шрифты — https://webfonts.pro/
Конвертер шрифтов — https://transfonter.org

Ссылка на FIGMA КЛИК

Плагин для Figma Inspect Styles

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

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

КАК ПОДКЛЮЧИТЬ ШРИФТ НА САЙТ В CSS

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

В корневой папке сайта создаём папку 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; 
}

Вы могли заметить, что есть разные форматы шрифтов — .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; 
}