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

Всем привет! В этой статье я расскажу как подключить любые шрифты на сайт с помощью CSS.

В мой проект необходимо подключить шрифты CoFo Sans и Gilroy. Я буду использовать все жирности от 100 до 900.

Вот таблица значений жирности шрифтов:

• font-weight: 100 - Thin
• font-weight: 200 - ExtraLight / UltraLight
• font-weight: 300 - Light
• font-weight: 400 - Regular
• font-weight: 500 - Medium
• font-weight: 600 - SemiBold
• font-weight: 700 - Bold
• font-weight: 800 - ExtraBold
• font-weight: 900 - Black / Heavy / Ultra

1. Скачиваем шрифты в формате .ttf, .woff, .woff2, .eot и скидываем в папку. У меня два шрифта, соответственно и две папки CoFoSans и Gilroy.
2. Загружаем их (папки со шрифтами) в папку fonts нашего проекта.
3. Заходим в main.css и подключаем шрифт с помощью конструкции ниже

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

Такую конструкцию мы вставляем столько раз, сколько необходимо подключить начертаний шрифтов.

Чтобы применит шрифт к блоку, необходимо в стилях указать название шрифта и жирность.

К примеру :

h1{ font-family: Gilroy; font-weight: 200; }

В данном случает заголовок будет написан шрифтом Gilroy-UltraLight

Без подключения шрифта

После подключения шрифта