Why is custom font not being applied in Vue with Sass?

Question

Fonts

I have a Vue JS application I use the
sass preprocessor
I want to use a custom font through font-face. There are no errors anywhere, but the font is not applied

. What could be the problem? maybe I somehow connected the font wrong?

vue.config.js:

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

project structure:


fonts.scss:

@font-face {
  font-family: "Modak";
  src: local("Modak");
  src: url("[email protected]/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;
  }

the font itself should look like this:

Answer 1

In the fonts.scss file, format was incorrectly specified in the src line, you need to do it like this:
src: url("[email protected]/assets/fonts/Modak/Modak-Regular.ttf") format("truetype");