Конвертер шрифтов в WOFF2 для сайта

Как подключить шрифт на сайт через @font-face

Скопируйте папку fonts и файл css/fonts.css из архива в проект и подключите стили в <head>. Каждое начертание описано отдельным правилом @font-face с одним именем семейства, поэтому в вёрстке достаточно указать font-family и нужный font-weight:

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-400-normal.woff2') format('woff2'),
         url('../fonts/inter-400-normal.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body { font-family: 'Inter', sans-serif; }

Подключение шрифтов в SCSS и SASS

В архиве есть партиалы _fonts.scss и _fonts.sass с переменными $font-path и $font-display. Подключите их через @use 'fonts' и при необходимости переопределите путь: @use 'fonts' with ($font-path: '/assets/fonts/'). Для каждого семейства создаётся переменная со стеком шрифтов, например $font-inter.

font-display: swap и предзагрузка

Значение swap показывает текст системным шрифтом сразу, а затем заменяет его загруженным — так страница не остаётся пустой. Чтобы ускорить появление основного шрифта, добавьте в <head> строку <link rel="preload" as="font" type="font/woff2" crossorigin> — готовый код есть на вкладке «HTML preload» и в README архива.