In main.scss I load local fonts from assets/styles/fonts folder:
@font-face {
font-family: 'Opensans-Bold';
font-style: normal;
src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'Opensans-Light';
font-style: normal;
src: local('Opensans-Light'), url(./fonts/OpenSans-Light.ttf) format('truetype');
}
then in vite.config I load main.scss:
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/assets/styles/main.scss";`
}
}
},
but all css from main.scss is applied except fonts, I get error:
downloadable font: download failed (font-family: "Opensans-Bold" style:normal weight:400 stretch:100 src index:1): status=2152398850 source: http://localhost:3000/fonts/OpenSans-Bold.ttf
Am I on right track or I need some other approach (similar works with Vue-CLI)?
That was the right way, the solution is the relative path so:
src: local('Opensans-Bold'), url(@/assets/styles/fonts/OpenSans-Bold.ttf) format('truetype');
and setting alias in vite.config.js :
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
}
}