Load local fonts in vite vue3 project

Question

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)?

Answer 1

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'),
  }
}

Answer 2

I was able to make this work by simply put the fonts on a public folder on root.

like:

public/.**.ttf
src/