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

@font-face

С помощью селектора @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";
}