Как установить шрифт в CSS (правило @font-face)

Установка загруженных шрифтов

С помощью CSS-правила @font-face можно добавлять сторонние шрифты, которые не установлены в операционной системе по умолчанию.

Ознакомиться со списком стандартных шрифтов можно - cssfontstack.com

Для добавления нестандартных шрифтов, используйте правило @font-face, которое должно быть добавлено в самое начало CSS-файла.

В правиле @font-face необходимо добавить ссылки на все доступные форматы шрифта.

Теперь чтобы применить подключенный шрифт к текстовому элементу, в свойстве font-family используйте имя, которое Вы указали в правиле @font-face

Использование шрифтов со сторонних серверов

Помимо возможности хранения шрифтов на собственном сервере, их также можно подключать со сторонних сервисов. Одним из наиболее популярных сервисов шрифтов является - fonts.google.com.

Чтобы использовать какой-либо шрифт с сервиса fonts.google.com, в начале CSS-файла добавьте правило @import и вставьте ссылку на CSS-файл, в котором уже прописаны все ссылки на шрифт, хранящийся на серверах Google.

Для применения подключенного шрифта также воспользуйтесь свойством font-family, в котором нужно указать имя подключенного шрифта.

Вместо использования правила @import, шрифты хранящиеся на сторонних серверах можно также подключить через тег <link> в html файле.