'Load local fonts in vite vue3 project

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

cssvue.jsvuejs3vite


Solution 1:[1]

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

like:

public/.**.ttf
src/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Theo Oliveira

Related Questions