@font-face
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
CSS @-правило **`@font-face`** позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция `local()`, с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции `url()`. `@font-face` позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом.Распространённым случаем является одновременное использование `url()` и `local()`, чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого @-правила (en-US).


```css
@font-face {
  font-family: "Open Sans";
  src:
    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
```

Синтаксис
---------

### Descriptors

`font-display`

Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.

`font-family`

Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.

`font-stretch` (en-US)

Значение `font-stretch` (en-US).

`font-style` (en-US)

Значение `font-style`.

`font-weight` (en-US)

Значение `font-weight`.

`font-variant` (en-US)

Значение `font-variant` (en-US).

`font-feature-settings` (en-US)

Позволяет контролировать другие расширенные особенности OpenType-шрифтов.

`font-variation-settings` (en-US)

Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.

`src` (en-US)

Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.

 Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции `format()`:
 src: url(ideal-sans-serif.woff) format("woff"),
 url(basic-sans-serif.ttf) format("opentype");Список доступных форматов: `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"`, и `"svg"`.


`unicode-range` (en-US)

Диапазон Unicode кодов, который будет использоваться в шрифте.

MIME-типы шрифтов
-----------------

| Формат | MIME-тип |
| --- | --- |
| TrueType | `font/ttf` |
| OpenType | `font/otf` |
| Web Open File Format | `font/woff` |
| Web Open File Format 2 | `font/woff2` |

Примечания
----------

* Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью CORS.
* `@font-face` не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:

```css
.className {
  @font-face {
    font-family: "MyHelvetica";
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
      url("MgOpenModernaBold.ttf");
    font-weight: bold;
  }
}
```

### Формальный синтаксис
```

@font-face =   
  @font-face { <declaration-list> }    
  
```

Примеры
-------

### Использование загружаемого шрифта

Этот пример указывает загружаемый шрифт для использования и применяет его ко всему телу документа:


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Web Font Sample</title>
    <style media="screen, print">
 @font-face {
 font-family: "Bitstream Vera Serif Bold";
 src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
 }

 body {
 font-family: "Bitstream Vera Serif Bold", serif;
 }
 </style>
  </head>
  <body>
    Это шрифт "Bitstream Vera Serif Bold" (он не поддерживает кириллические
    символы).
  </body>
</html>
```


Результат будет таким:

### Использование локальных шрифтов

В этом примере используется локальный пользовательский шрифт "Helvetica Neue Bold". Если у пользователя этот шрифт не установлен (поиск происходит по полному названию шрифта и по Postscript-названию), тогда вместо него используется загружаемый шрифт "MgOpenModernaBold.ttf":


```css
@font-face {
  font-family: "MyHelvetica";
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.ttf");
  font-weight: bold;
}
```

Спецификации
------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-face-rule |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* WOFF
* Генератор FontSquirrel @font-face
* Красивые шрифты с помощью @font-face
* Библиотека шрифтов