Почему не приминяется кастомный шрифт во Vue с Sass?

Question

[postya]

Имеется приложение на Vue JS
Использую препроцессор sass
Хочу использовать кастомный шрифт через font-face. Ошибок нигде нет, но шрифт не применяется

В чем может быть проблема? может я как-то не так шрифт подключил?

vue.config.js:

module.exports = {
  devServer: {
    port: 11000,
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `
        @import "@/assets/scss/styles.scss";
        @import "~@/assets/scss/fonts.scss";
        `,
      },
    },
  },
};

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


fonts.scss:

@font-face {
  font-family: "Modak";
  src: local("Modak");
  src: url("~@/assets/fonts/Modak/Modak-Regular.ttf") format("ttf");
  font-weight: 400;
}

HTML:

h2 {
    font-size: $font-size * 2;
    font-family: "Modak", sans-serif;
    text-transform: uppercase;
    font-weight: normal;
  }

сам шрифт должен выглядеть вот так:

Comments

[Павел Вирский]

В вкладке Network видно, что шрифт загружается?

[postya]

Конкретно этого шрифта даже в списке Network нет, но есть Open Sans, который я также подключал, может это из за того,что он ttf?

@font-face {
  font-family: "Open Sans";
  src: local("Open Sans");
  src: url("~@/assets/fonts/Open Sans/OpenSans-Light.woff") format("woff");
  font-weight: 300;
}

[Softlink]

А в билде что? Есть вообще упоминания о шрифте? Может какой-нибудь оптимизатор в сборщике решил, что ttf - не модно и вырезал его. Еще в format обычно пишут truetype, а не ttf.

[postya]

Softlink, изменил format на
format("truetype");
шрифт применился, спасибо!

Answer 1

[postya]

В файле fonts.scss в строке src был неправилньо указан format, сделать нужно вот так:
src: url("~@/assets/fonts/Modak/Modak-Regular.ttf") format("truetype");