Why isn't a custom font handled in Vue with Sass?

  • 0
    Vue JS application available
    Using the sass preprocessor
    I want to use a custom font via font-face. There are no errors anywhere, but the font is not being applied.

    What could be the problem? maybe I connected the font somehow 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:
    Vue.js Iris Simon, Aug 13, 2019

  • 1 Answers
  • 0
    In the file fonts.scss in the src line, format was specified incorrectly, you need to do it like this:

    src: url ("[email protected]/assets/fonts/Modak/Modak-Regular.ttf") format ("truetype");
    Sophie Winters

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!