Подключение шрифтов

С помощью селектора @font-face можно определить дополнительный шрифт, загружаемый с хостинга, для отображения на странице сайта, а так же задать ему сопутствующие настройки.
Декларация @font-face может содержать ряд свойств таких как: название шрифта, его размер, начертание шрифта и прочее. Здесь же указываются ссылки на необходимый шрифт.
@font-face {...}
Чтобы подключить выбранный шрифт следует создать правило @font-face которое включает в себя ряд свойств:
CSS
/* font-family: "AirportRegular"; */
@font-face {
font-family: "AirportRegular";
src: url("AirportRegular.eot");
src: url("AirportRegular.eot?#iefix")format("embedded-opentype"),
url("AirportRegular.woff") format("woff"),
url("AirportRegular.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
В самом начале декларации @font-face указан используемый шрифт, в данном примере это «AirportRegular
». Далее идут ссылки расположения шрифтов с разными расширениями .eot
; .woff
; .ttf
.
*.ttf
(True Type
) – самый старый и широко используемый формат, разработанный Apple еще в восьмидесятых годах прошлого века. Шрифт с данным расширением понимает все браузеры.
*.eot
(Embedded OpenType
) – продукт компанией Microsoft. Он задействован для старых браузеров Internet explorer ниже девятой версии.
*.woff
(Web Open Font Format
) – подобный формат был специально разработан именно для web- страниц в 2009 году.
В окончании декларации @font-face записаны свойства начертания шрифта и насыщенность шрифта. Сам шрифт и указанный выше код можно скачать с сайта – fonts4web
Скаченный файл со шрифтами разархивировать в папке сайта, которая имеет, как правило, название «fonts
», затем в папке «css
» нужно создать файл «fonts.css
», где и будут записываться подобные свойства шрифтов.
Путь к папке с файлами шрифта указывается в зависимости от структуры сайта и может быть, например таким:
/myfolder/fonts/AirportRegular/AirportRegular.eot
/myfolder/fonts/AirportRegular/AirportRegular.eot?#iefix
/myfolder/fonts/AirportRegular/AirportRegular.woff
/myfolder/fonts/AirportRegular/AirportRegular.ttf
Путь к CSS файлу где находятся правила @font-face выглядит следующим образом:
/myfolder/css/fonts.css
В каскадных таблицах стилей можно задать шрифт, например для заголовков второго и третьего уровня:
h2, h3 {
font-family: "AirportRegular";
}