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:
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'
In this article, we will learn to add Custom Fonts to our Next. js project. Step 2: Open the project in your code editor, and create a new folder in the root directory called fonts. Step 3: If you already have the fonts, then skip this step.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With