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

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

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

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

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

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

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)