Урок 18 из 25
В прогрессе

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


Ссылка на 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; 
}

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

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

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

КАК ПОДКЛЮЧИТЬ ШРИФТ С ПОМОЩЬЮ РАЗЛИЧНЫХ СЕРВИСОВ

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

  1. Находим нужный шрифт или выбираем из уже имеющихся;
  2. Скачиваем архив и добавляем его в папку fontsКак подключить шрифт на сайт в CSS с помощью fonts4web
  3. Копируем уже готовый CSS-код для файла style.cssКак подключить шрифт на сайт в CSS с помощью fonts4web

Готово!

САМЫЙ ПРОСТОЙ СПОСОБ ПОДКЛЮЧЕНИЯ ШРИФТОВ

Используя сервис Google Fonts:

  1. Заходим на сайт https://fonts.google.com;
  2. Находим нужный шрифт или несколько: Как подключить шрифт на сайт в CSS с помощью Google Fonts
  3. Нажимаем на красный круг в правом верхнем углу в блоке шрифта;
  4. Внизу нажимаем на появившееся чёрное поле: Как подключить шрифт на сайт в CSS с помощью Google Fonts
  5. При желании кастомизируем шрифт;
  6. Копируем ссылку и вставляем ее в тег headКак подключить шрифт на сайт в CSS с помощью Google Fonts

Подсказка

Задание

Вёрстка шапки