Для подключения дополнительных шрифтов в css, необходимо, прежде всего, скачать и расположить на сайте сами шрифты, а так же и их различные начертания.
Стоить учесть, что шрифты могут быть в различных форматах, а так же различные браузеры и их версии могут не поддерживать тот или иной формат.
На данный момент используются следующие форматы:
- OTF/TTF (OpenType Font и TrueType Font) — свободно распространяемые форматы шрифтов, поддерживаемые практически всеми браузерами.
- WOFF (Web Open Font Format) — сжатый формат OTF/TTF, поддерживаемые практически всеми браузерами.
- EOT (Embedded Open Type) — сжатый формат TTF, работающий только в браузерах IE
- SVG/SVGZ (Scalabe Vector Graphics) — формат шрифтов векторного начертания.
Для наглядности будем считать что в одном каталоге располагается файл стилей, в котором в дальнейшем будем подключать новые шрифты, и подкаталог fonts, в котором будут находиться сами шрифты: font2web (обычный шрифт с весом 400), font2web_ExtraBold (обычный шрифт с весом 800), font2web_MediumItalic (курсивный шрифт с весом 600).
После того как в подкаталоге fonts размещены шрифты нужных форматов и необходимых начертаний, переходим к файлу стиля css. В данном файле, используя правило @font-face, подключаем, имеющиеся шрифты.
Правило @font-face представляет из себя блок, заключенный в фигурные скобки, со следующими параметрами:
- font-family — название семейства шрифтов, которое будет использоваться в дальнейшем
- src — путь до файла со шрифтом; в данном параметре используется подпараметр url(), в котором указывается непосредственно путь до файла, и format() - тип шрифта
- src: local() - проверяет установлен ли данный шрифт на компьютере пользователя
- font-weight — вес шрифта
- font-style — начертание шрифта
Для примера подключим некий шрифт font2web в формате otf, eot, woff, ttf:
@font-face{
font-family: "font2web";
src: local("font2web"),
url("fonts/font2web.otf") format('opentype'),
url("fonts/font2web.eot?") format("eot"), /* IE8+, знак ? позволяет обойти баг в обработчике значения src */;
url("fonts/font2web.woff") format("woff"),
url("fonts/font2web.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
Для подключения остальных шрифтов (начертаний ранее подключенного шрифта), также используется правило@font-face с тем же именем шрифта, но с соответствующими для шрифта значениями веса (font-weight) и начертания (font-style). Так к примеру будет описано правило для шрифтов font2web_ExtraBold и font2web_MediumItalic
@font-face{
font-family: "font2web";
src: local("font2web"),
url("fonts/font2web_ExtraBold.otf") format('opentype'),
url("fonts/font2web_ExtraBold.eot?") format("eot"), /* IE8+, знак ? позволяет обойти баг в обработчике значения src */;
url("fonts/font2web_ExtraBold.woff") format("woff"),
url("fonts/font2web_ExtraBold.ttf") format("truetype");
font-weight: ExtraBold;
font-style: normal;
}
@font-face{
font-family: "font2web";
src: local("font2web"),
url("fonts/font2web_MediumItalic.otf") format('opentype'),
url("fonts/font2web_MediumItalic.eot?") format("eot"), /* IE8+, знак ? позволяет обойти баг в обработчике значения src */;
url("fonts/font2web_MediumItalic.woff") format("woff"),
url("fonts/font2web_MediumItalic.ttf") format("truetype");
font-weight: 600;
font-style: italic;
}
В font-weight можно использовать не ключевые слова, а цифры
- 100 Ultra Light
- 200 Thin
- 300 Light
- 400 Regular, Normal
- 500 Roman
- 600 Medium, SemiBold
- 700 Bold
- 800 Heavy, ExtraBold
- 900 Black
Если отсутствует или нет необходимости в использование какого либо формата, то просто не добавляйте его в правило @font-face
Дальнейшая работа с подключенными шрифтами осуществляется так же как и с обычными.