CSS :: Правило @font-face

css-правило @font-face (от англ. font face – вид шрифта) используется для загрузки на компьютер пользователя специфичного или авторского шрифта непосредственно с сервера, на котором расположен сайт.

Синтаксис

@font-face {font-family: <имя шрифта>; src: [url(<адрес>)]#;}

Значения

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

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-fonts-3/#font-face-rule

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/@font-face

Примеры

CSS

htmlCodes

/* Загружаем свой шрифт с сервера */
@font-face {
	font-family: my_font;
	src: url("my_fonts/font_1.ttf"),
			 url("my_fonts/font_1.eot");
}

/* 	Применяем шрифт к абзацам с атрибутом class="font_1" */
p.font_1 {
  font-family: my_font, verdana, serif;
}

Пример №1