vue.js cli project not loading local fonts

Question

There seems to be many issues around loading fonts on vue.js projects, I am using a webpack build and my

build/webpack.base.conf.js

URL loader looks as follows:

  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }

Inside my src folder I have

assets/fonts/Radomir Tinkov - Gilroy-Regular.otf

And my App.vue contains the following code:

<style lang="scss">

//fonts

@font-face {
  font-family: "Gilroy";
  src: url("assets/fonts/Radomir Tinkov - Gilroy-Regular.otf") format("otf");
}

In my terminal I get the following error:

This relative module was not found:

* ./assets/fonts/Radomir%20Tinkov%20-%20Gilroy-Regular.otf in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue

How do you define the correct font paths in vue.js?

Answer 1

In the vuejs project I am working on,

This one not worked:

@font-face {
   font-family: 'name-of-choice';
   src: url("~@/assets/<location-to-your-font-file>/font-file-name.ttf") format('font-type');
}

This worked:

@font-face {
   font-family: 'name-of-choice';
   src: url(~@/assets/<location-to-your-font-file>/font-file-name.ttf) format('font-type');
}

And I've observed that if we use the solution without double quote for one single time and then add double quotes, it again works!

Solution: Try without double-quotes, it should work.