Я бы посоветовал использовать пакет для подключения, в разных форматах.
Компиляция происходит очень просто
https://fontie.pixelsvsbytes.com/webfont-generator
Выбираете: Formats ставите галочку на TrueType Font.
После этого, загружаете любой из скачанных шрифтов (формат не важен) нажав на ссылку выше "Add your font files (or just drop them on the page)". Жмем "Generate & download your @font-face package" и скачиваем архив с генерированными шрифтами.
Следующий шаг: Открываем архив и копируем все шрифты(.ttf, .eot, .svg, .woff и .woff2) в директорию с проектом в папку fonts. В скачанном архиве, открываем файл *.css он там один и копируем стиль для шрифта в отдельный файл стилей шрифтов (как правило это файл _fonts.sass) подключенный к основному стилевому файлу к примеру так:
...где fonts это имя вашего sass файла со шрифтами.
Пример комплекта подключения:
(копируем в файл _fonts.sass) структура может изменяться исходя из имени вашего шрифта.
Данный способ универсален и более насыщен для работы, является более кроссбраузерным. Интеграция шрифта - как обычно.
