Подключение нестандартных шрифтов к сайту
Для подключения нестандартных шрифтов из локальной папки используют 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)