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

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

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

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

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

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

@font-face {
  font-family: 'MyAwesomeFont'; /* Придумайте название для шрифта */
  src: url('fonts/MyAwesomeFont.eot'); /* IE9  */
  src: url('fonts/MyAwesomeFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/MyAwesomeFont.woff2') format('woff2'), /* Самые современные браузеры */
       url('fonts/MyAwesomeFont.woff') format('woff'), /* Современные браузеры */
       url('fonts/MyAwesomeFont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/MyAwesomeFont.svg#svgFontName') format('svg'); /* iOS */
}

@font-face {

font-family: 'MyAwesomeFont'; /* Придумайте название для шрифта */

src: url('fonts/MyAwesomeFont.eot'); /* IE9 */

src: url('fonts/MyAwesomeFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('fonts/MyAwesomeFont.woff2') format('woff2'), /* Самые современные браузеры */

url('fonts/MyAwesomeFont.woff') format('woff'), /* Современные браузеры */

url('fonts/MyAwesomeFont.ttf') format('truetype'), /* Safari, Android, iOS */

url('fonts/MyAwesomeFont.svg#svgFontName') format('svg'); /* iOS */

}

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

p {
  font-family: 'MyAwesomeFont', sans-serif;
}

p {

font-family: 'MyAwesomeFont', sans-serif;

}

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

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

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

@import url('https://fonts.googleapis.com/css?family=Fira+Sans');

1	@import url('https://fonts.googleapis.com/css?family=Fira+Sans');

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

p {
  font-family: 'Fira Sans', sans-serif;
}

p {

font-family: 'Fira Sans', sans-serif;

}

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

<link href='//fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>

1	<link href='//fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>

Flexbox генератор