Подключение нестандартных шрифтов к сайту

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

Одинаковые шрифты подключаются с одним именем, различающуюся жирность и стиль пишем в font-weight и font-style.

Сегодня в Интернете используются четыре формата контейнеров шрифтов: EOT, TTF, WOFF и WOFF2. К сожалению не существует единого формата, который работает во всех браузерах.  EOT доступен только в IE, TTF поддерживается в этом браузере только частично. WOFF распространен шире всего, однако его нельзя использовать в некоторых старых браузерах, а над поддержкой WOFF 2.0 ещё работают. Поэтому для того чтобы шрифт корректно отображался во всех браузерах нужно указывать несколько форматов а браузер сам выберет  какой формат ему использовать.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans/OpenSans-Thin.eot');
    src: url('../fonts/OpenSans/OpenSans-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/OpenSans/OpenSans-Thin.woff') format('woff'),
        url('../fonts/OpenSans/OpenSans-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
 
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans/OpenSans-Black.eot');
    src: url('../fonts/OpenSans/OpenSans-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/OpenSans/OpenSans-Black.woff') format('woff'),
        url('../fonts/OpenSans/OpenSans-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

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

1
2
3
4
p {
    font-family: OpenSans, Arial;
    font-weight: 100;
}

Также желательно указывать запасной веб-безопасный шрифт и семейство.

font-weight — соответствие слов и чисел

  • 100 — Thin (Hairline)
  • 200 — Extra Light (Ultra Light)
  • 300 — Light
  • 400 — Normal
  • 500 — Medium
  • 600 — Semi Bold (Demi Bold)
  • 700 — Bold
  • 800 — Extra Bold (Ultra Bold)
  • 900 — Black (Heavy)
#Верстка CSS