Как использовать вариативный шрифт

Короткий ответ

Вариативный шрифт — это один файл, в котором толщина (а иногда ширина и наклон) меняется плавно. Подключите его через @font-face с диапазоном толщин:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
 
h1 { font-family: "Inter", system-ui, sans-serif; font-weight: 650; }

Запись font-weight: 100 900 говорит браузеру, что в файле есть все толщины от 100 до 900, и подходит любое число, а не только круглые сотни.

Любая толщина и анимация

С вариативным шрифтом толщину можно менять плавно. Наведите курсор на слово:

<style>
  .grow { font: 300 32px system-ui, sans-serif; transition: font-weight 0.4s; }
  .grow:hover { font-weight: 800; }
</style>
 
<p class="grow">Hover me</p>

Системные шрифты Windows 11 и macOS вариативные, поэтому там толщина меняется плавно. С обычным шрифтом она прыгает между доступными начертаниями.

Другие оси

Стандартные оси управляются обычными свойствами: толщина — font-weight, ширина — font-stretch, наклон — font-style: oblique 10deg. Собственные оси шрифта, например «округлость», задают через font-variation-settings четырёхбуквенным именем:

.title { font-variation-settings: "SOFT" 100; }

Частая ошибка

Задавать толщину через font-variation-settings: "wght" 650 вместо font-weight: 650. Это свойство перезаписывает все оси разом и не наследуется по частям, поэтому <strong> внутри перестаёт быть жирным. Для стандартных осей используйте обычные свойства, а font-variation-settings — только для нестандартных.