CSS-правило @font-face

Правило @font-face используется для связи имени шрифта, который будет использоваться в таблице стилей, с некоторым загружаемым шрифтом. Свойство font-family используется в правиле для именования шрифта, а дескриптор src связан с внешним именем шрифта.

Синтаксис

Синтаксически правило задается по следующему шаблону:

@font-face: font-description

Правило @font-face может содержать одно или несколько объявлений свойств, как в обычном CSS, которые называются дескрипторами шрифта. О шрифтах подробнее в Руководстве по CSS Fonts.

Общая форма правила @font-face:

@font-face { font-family: fontname; src: url(fontfile path); }

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

Примеры написания кода правила @font-face:

@font-face {
    font-family: "OpenSans";
    src: url("../fonts/OpenSans-Regular.eot");
    src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
body {
    font-family: "OpenSans", Arial, sans-serif;
    font-size: 1.2em;
}

Также можно установить выбор конкретного шрифта, когда для него установлена определенная характеристика, например bold или italic.

@font-face {
    font-family: "OpenSans";
    src: url("../fonts/OpenSans-Regular.eot");
    src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "OpenSansBold";
    src: url("../fonts/OpenSans-Bold.eot");
    src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
}
h1 {
    font-family: "OpenSansBold", Arial, sans-serif;    /* Specify the OpenSans bold font */
}
p {
    font-family: "OpenSans", Arial, sans-serif;
}

Параметры

Параметры имеют следующие значения:

Поддержка браузеров

Правило @font-face поддерживается во всех основных браузерах.