Правило @font-face позволяет авторам указывать онлайн-шрифты для отображения текста на своих веб-страницах.
Позволяя авторам предоставлять свои собственные шрифты, @font-face устраняет необходимость зависеть от ограниченного количества шрифтов, установленных пользователями на их компьютерах.
Позволяет управлять расширенными типографскими функциями в шрифтах OpenType.
font-variation-settings
Позволяет контролировать уровень шрифтов OpenType или TrueType на низком уровне, указывая имена четырех буквенных имен функций, которые могут меняться, вместе с их значениями.
src
Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения файла шрифта или имя шрифта на компьютере пользователя.
<html><head><title>Web Font Sample</title><styletype="text/css"media="screen, print">@font-face{font-family:'Bitstream Vera Serif Bold';src:url('https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf');}body{font-family:'Bitstream Vera Serif Bold',serif;}</style></head><body>
This is Bitstream Vera Serif Bold.
</body></html>
123456
@font-face{font-family:MyHelvetica;src:local('Helvetica Neue Bold'),local('HelveticaNeue-Bold'),url(MgOpenModernaBold.ttf);font-weight:bold;}