CSS@-правило@font-face позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url(). @font-face позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом.Распространённым случаем является одновременное использование url() и local(), чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого @-правила.
Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.
Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.
Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format():
src: url(ideal-sans-serif.woff) format("woff"),
url(basic-sans-serif.ttf) format("opentype");Список доступных форматов: "woff", "woff2", "truetype", "opentype", "embedded-opentype", и "svg".
Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью 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;}}
Этот пример указывает загружаемый шрифт для использования и применяет его ко всему телу документа:
html
<!doctypehtml><htmllang="en-US"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width"/><title>Web Font Sample</title><stylemedia="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;}
Tip: you can click/tap on a cell for more information.
Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.