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

Не подключаются шрифты.

Моя структура проекта:

-project
  -dist
    -js
      file.js
    -css
      file.css
    -fonts
      file.ttf
  -src
    -js
      file.js
      ...
    -scss
      stule.scss
      -utils
        fonts.scss
        ...
    -fonts
      file.ttf
      ...
  index.html

В fonts.scss подключаю так

@font-face {
  font-family: Roboto-Medium;
  src: local("Roboto-Medium"),
  url(../fonts/Roboto-Medium.ttf) format("ttf");
}

В style.scss использую так:

@import "utils/fonts";
...
.landing__description-title {
  font-family: "Roboto-Medium";
  width: $landingWidhtTitle;
  ...
}

Но когда собираю проект в webpack на странице index.html шрифт не работает, остальные стили работают.

Если меняю путь с url(../fonts/Roboto-Medium.ttf) format("ttf"); на url(../../fonts/Roboto-Medium.ttf) format("ttf"); выдает ошибку Module not found: Error: Can't resolve '../../fonts/Roboto-Medium.ttf' in 'C:\Users\qwe\webpack-starter\src\scss'/ В чем моя проблема заключается?