use local typeface in vue-cli 3

Not sure if this helps at this stage but I had the same issue and resolved it by using relative paths (i.e. ../assets/fonts/myfont.woff) rather than using the root wildcard (i.e. @/assets/fonts/myfont.woff or @~/assets/fonts/myfont.woff).

Hope it helps you!

Try this ~@/assets/...

@font-face {  font-family: 'HKGrotesk';  src:  url('~@/assets/typo/HKGrotesk-Regular.woff2') format('woff2'),        url('~@/assets/typo/HKGrotesk-Regular.woff') format('woff');  font-weight: normal;  font-style: normal;}

With vue-cli 3, you have Webpack 4 and default loaders working for you, so you don't need to configure any loader for such a task. The only thing you'll have to do is create a main.scss file in your scss folder. In that file, import your _color.scss and _typo.scss. Then, in your main.js import your main style file like import './stylus/main.scss';. With that, you should be good to go. Just use your font in your css like body {font-family: "HKGrotesk", sans-serif;}, for instance. Don't forget to remove your css loader from vue.config to not interfere with webpack's default behavior.