CODEWITHSUNDEEP
vue.jsfont-facevue-cli
iamrobin.
iamrobin.

Reputation: 1634

use local typeface in vue-cli 3

I want to import an local typeface into my vue-cli 3 project.

The .woff and .woff3 files are in src/assets/typo and I include them in src/scss/_typo.scss: enter image description here

My _typo.scss looks like this:

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

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

@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;
}

And this is my vue.config to use the colors and typeface globally:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/_colors.scss";
          @import "@/scss/_typo.scss";
        `
      }
    }
  }
};

When I run my project I got the following error message:

Failed to compile.

./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module not found: Error: Can't resolve './@/assets/typo/HKGrotesk-Bold.woff' in '/Users/robin/Documents/Code/2018/iamrobin-portfolio/src'

Upvotes: 7

Views: 6651

Answers (4)

JPilson
JPilson

Reputation: 1172

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;
}

Upvotes: 2

y_nk
y_nk

Reputation: 2275

I've been having the same issue, I wished it was referenced in vue cli github issues :) Fixed by forcing myself to use relative paths, but this sucks really.

Upvotes: 0

Croot
Croot

Reputation: 331

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!

Upvotes: 4

dalvallana
dalvallana

Reputation: 469

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.

Upvotes: 0

Related Questions