@font-face

Поддержка браузерами

Описание

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

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

@font-face {
  font-family: myFont;
  src: url("Fun_Light.ttf"),
       url("Fun_Light.eot");
}

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

@font-face {
  font-family: myFont;
  src: url("Fun_Light.ttf"),
       url("Fun_Light.eot");
}

p {
  font-family: myFont, serif;
}

Значения свойства

Свойство	Значение	Описание
font-family	имя	Определяет название шрифта (обязательный параметр).
src	url	Определяет путь к файлу шрифта, который будет использоваться (обязательный параметр).
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Указывает, как должен растягиваться шрифт (необязательный параметр). Значение по умолчанию - normal.
font-style	normal italic oblique	Определяет стиль для шрифта (необязательный параметр). Значение по умолчанию - normal.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Определяет толщину шрифта (необязательный параметр). Значение по умолчанию - normal.
unicode-range	unicode-диапазон	Определяет диапазон поддерживаемых unicode символов (необязательный параметр). Значение по умолчанию - "U+0-10FFFF".

Пример

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    @font-face {
      font-family: myFont;
      src: url('terminator_real_nfi.ttf');
    }
    div { font-family: myFont; }
  </style>
</head>
<body>

  <div style="font-size: 40px;">
    TERMINATOR
  </div>

</body>
</html>

Результат данного примера в окне браузера: