3

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?

HGB
  • 2,157
  • 8
  • 43
  • 74
  • 4
    Could you try `font-face { src: url(~@/assets/blah/font.otf);}`? Pretty sure I know the exact issue your running into. – zero298 Apr 24 '18 at 14:16
  • Also, please check this question: https://stackoverflow.com/q/45760741/691711 – zero298 Apr 24 '18 at 14:58
  • Hey @zero298 your above path seems to have worked. Is it possible to establish an entire folder as the source? Thanks? – HGB Apr 24 '18 at 15:25
  • I'm not sure what you mean. I don't think that `font-face` would understand globbing. Can you provide a little more detail on what you mean? – zero298 Apr 24 '18 at 17:23
  • I had a search online, it seems like for every font-style, you must create another instance of 'font-face'. I have included all the instances into a separate `./assets/scss/_fonts.scss` file which I am having to directly import in every component with `@import '~@/assets/scss/fonts'` Is there a less repetitive way of doing this? – HGB Apr 26 '18 at 15:56
  • I would import into your app's entrypoint component. Are you using `scoped`? If you aren't, the imported style should apply, or at least be available to, all components. – zero298 Apr 26 '18 at 16:02

2 Answers2

2

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.

bluelights
  • 1,086
  • 8
  • 12
0

For me worked removing @font-face and use font-family inside selector, example:

* {
  font-family: "Roboto Condensed", sans-serif;
  src: url(../../public/fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf) format('font-type');
}
denbon05
  • 21
  • 4