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

Определение и применение

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

В src источники проверяются по порядку. Для современных браузеров основным форматом служит WOFF2; WOFF можно оставить для старых целевых браузеров. Относительный путь считается от CSS-файла, а не HTML-страницы.

Для статических файлов каждому начертанию задают своё @font-face с общим именем семейства и правильными font-weight/font-style. unicode-range не вырезает символы из файла: он помогает выбрать, какой заранее подготовленный файл загружать. Загружается файл целиком, поэтому для экономии размера нужны отдельные поднаборы.

Для вариативного шрифта дескрипторы могут задавать диапазоны, например font-weight: 100 900. Дополнительные дескрипторы size-adjust, ascent-override, descent-override и line-gap-override помогают согласовать масштаб и метрики с запасным шрифтом. Источник с другого сайта должен разрешать загрузку через CORS.

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

Спецификация: CSS fonts

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (12) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.at-rules.font-face
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`font-face`	✓1	✓12	✓3.5	✓10	✓3.1	✓18	✓4	✓10.1	✓2	✓1.0	✓2.2	✓2
OpenType CBDT and CBLC rendering	✓66	✓79	×	✓53	×	✓66	×	✓47	×	✓9.0	✓66	×
OpenType COLRv0 rendering	✓53	✓79	✓31	✓40	✓11.1	✓53	✓31	✓41	✓11.3	✓6.0	✓53	✓11.3
OpenType COLRv1 rendering	✓98	✓98	✓107	✓84	×	✓98	✓107	✓68	×	✓18.0	✓98	×
OpenType SBIX rendering	✓66	✓79	×	✓53	✓9.1	✓66	×	✓47	✓9.3	✓9.0	✓66	✓9.3
OpenType SVG rendering	×	×	✓31	×	✓12.1	×	✓31	×	✓12.2	×	×	✓12.2
SVG fonts	×	×	×	×	✓3.1	×	×	×	✓3	×	×	✓3
`WOFF`	✓6	✓12	✓3.5	✓11.1	✓5.1	✓18	✓4	✓11.1	✓5	✓1.0	✓4.4	✓5
WOFF 2	✓36	✓14	✓39	✓23	✓10	✓36	✓39	✓24	✓10	✓3.0	✓37	✓10
`ascent-override`	✓87	✓87	✓89	✓73	✓preview	✓87	✓89	✓62	×	✓14.0	✓87	×
`descent-override`	✓87	✓87	✓89	✓73	✓preview	✓87	✓89	✓62	×	✓14.0	✓87	×
`font-display`	✓60	✓79	✓58	✓47	✓11.1	✓60	✓58	✓44	✓11.3	✓11.0	✓60	✓11.3
`font-family`	✓4	✓12	✓3.5	✓10	✓3.1	✓18	✓4	✓10.1	✓2	✓1.0	✓2.2	✓2
`font-feature-settings`	✓140	✓140	✓34	✓124	✓10	✓140	✓34	✓92	✓10	✓30.0	✓140	✓10
`font-stretch`	✓62	✓17	✓62	✓49	✓10.1	✓62	✓62	✓41	✓10.3	✓6.0	✓62	✓10.3
`font-style`	✓4	✓12	✓3.5	✓10	✓3.1	✓18	✓4	✓10.1	✓2	✓1.0	✓4.4	✓2
`font-variant`	✓4	✓12	✓3.5	✓10	✓3.1	✓18	✓4	✓10.1	✓2	✓1.0	✓4.4	✓2
`font-variation-settings`	✓140	✓140	✓62	✓124	×	✓140	✓62	✓92	×	✓30.0	✓140	×
`font-weight`	✓4	✓12	✓3.5	✓10	✓3.1	✓18	✓4	✓10.1	✓2	✓1.0	✓4.4	✓2
`font-width`	×	×	×	×	✓18.4	×	×	×	✓18.4	×	×	✓18.4
`line-gap-override`	✓87	✓87	✓89	✓73	✓preview	✓87	✓89	✓62	×	✓14.0	✓87	×
`size-adjust`	✓92	✓92	✓92	✓78	✓17	✓92	✓92	×	✓17	✓16.0	✓92	✓17
`src`	✓4	✓12	✓3.5	✓10	✓3.1	✓18	✓4	✓10.1	✓2	✓1.0	✓2.2	✓2
Drop invalid item (not src string)	◐108	◐108	✓109	◐94	×	◐108	✓109	◐73	×	◐21.0	◐108	×
format(keyword)	✓108	✓108	✓105	✓94	✓4	✓108	✓105	✓73	✓5	✓21.0	✓108	✓5
format('*-variations')	✓66	✓17	✓62	✓53	✓11	✓66	✓62	✓47	✓11	✓9.0	✓66	✓11
tech(keyword)	✓108	✓108	✓107	✓94	✓17	✓108	✓107	✓73	✓17	✓21.0	✓108	✓17
`unicode-range`	✓1	✓12	✓36	✓15	✓3.1	✓18	✓36	✓14	✓3	✓1.0	✓4.4	✓3
Ещё 14 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

TTF/OTF (TrueType и OpenType) — форматы с широкой поддержкой. TrueType первоначально разработан Apple, OpenType — Microsoft и Adobe.
WOFF (Web Open Font Format) - сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
WOFF2 (Web Open Font Format 2) - спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
SVG-шрифты — устаревший формат, не используемый современными браузерами; не путайте его с SVG-глифами внутри OpenType.
EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).

CSS синтаксис:

CSS

@font-face{
font-properties: font-properties value;
}

@font-face{
font-family: name; /* Обязательное значение */
src: URL; /* Обязательное значение */
font-stretch: normal | condensed | ultra-condensed | extra-condensed | semi-condensed | expanded | semi-expanded | extra-expanded | ultra-expanded;
font-style: normal | italic | oblique;
font-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
unicode-range: unicode-range;
}

Значения правила

Значение	Описание
`font-family`	Имя семейства, которое затем используют в CSS. Название из нескольких слов удобно записывать в кавычках. Обязательный дескриптор.
`src`	Определяет URL-адрес(ы), откуда шрифт должен быть загружен. Обязательное значение. Допускается указывать шрифт на локальном компьютере пользователя по имени, используя следующий синтаксис: @font-face{ `font-family`: `"Font Name"`; `src`: `local("Font Name")`, `url("/fonts/Font Name.woff2") format('woff2'), url("/fonts/Font Name.woff") format('woff'), url('/fonts/Font Name.ttf') format('truetype')`; } Если в этом случае шрифт не найден на локальном компьютере пользователя, то будет осуществлен поиск в других указанных источниках.
`font-stretch`	Описывает ширину начертания в файле, а не растягивает готовый шрифт. Значение по умолчанию - `"normal"`. Необязательное значение.
`font-style`	Задает стиль шрифта (обычный \| курсивный \| наклонный). Значение по умолчанию - `"normal"`. Необязательное значение.
`font-weight`	Насыщенность начертания, по умолчанию `normal`. Для вариативного файла допустим диапазон, например `100 900`. Дескриптор описывает файл, а не дорисовывает отсутствующие в нём начертания.
`unicode-range`	Определяет диапазон символов Unicode, которые шрифт поддерживает. Значение по умолчанию - `"U+0-10FFFF"`. Необязательное значение. С помощью данного дескриптора диапазона Unicode мы можем создать разделенный запятыми список значений диапазона. Каждый из них может быть указан в одной из трех форм: Одна кодовая точка (например, `U+416`). Начальную и конечную кодовые точки диапазона (например, `U+400-4ff`). Подстановочный диапазон (например, `U+4??`) - символы '?' обозначают любое шестандцатиричное число. Диапазоны `unicode-range` позволяют разделить семейство на файлы, например для кириллицы и латиницы. Браузер загружает подходящие файлы, когда их символы используются на странице.
`font-display`	`auto`, `block`, `swap`, `fallback`, `optional` управляют показом текста во время загрузки. `swap` позволяет быстро показать запасной шрифт и заменить его после загрузки; замена может изменить размеры текста.

Версия CSS

CSS3

Примеры, попробуйте сами

Локальный шрифт и начертания

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

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #24364b;
    overflow-wrap: anywhere;
}
section {
    margin-block: 16px;
    padding: 12px;
    border: 1px solid #a8b8c7;
}
p {
    padding: 8px;
}
label {
    display: block;
    margin-block: 12px;
}
input,
button {
    max-width: 100%;
    font: inherit;
    padding: 8px;
}
input[type='checkbox'] + label {
    display: inline;
}
a {
    color: #135fb5;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Локальный шрифт и начертания</title>
  </head>
  <body>
    <p class="sample">Обычное начертание</p>
    <p class="sample"><strong>Полужирное начертание</strong></p>
    <p class="sample"><em>Курсивное начертание</em></p>
  </body>
</html>

style.css

CSS

@font-face {
    font-family: 'Roboto';
    src: url('assets/roboto-v18-cyrillic_latin-regular.woff') format('woff');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('assets/roboto-v18-cyrillic_latin-700.woff') format('woff');
    font-style: normal;
    font-weight: bold;
}
@font-face {
    font-family: 'Roboto';
    src: url('assets/roboto-v18-cyrillic_latin-italic.woff') format('woff');
    font-style: italic;
    font-weight: normal;
}
.sample {
    font-family: 'Roboto', sans-serif;
}

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