How to import fonts for local and production environment?

[silversonicaxel]

I've this scss code in the file src/assets/styles/_fonts.scss :

@font-face {
  font-family: 'Share Tech';
  src: url('../fonts/MY-FONT.eot');
  src: url('../fonts/MY-FONT.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MY-FONT.woff2') format('woff2'),
    url('../fonts/MY-FONT.woff') format('woff'),
    url('../fonts/MY-FONT.ttf') format('truetype'),
    url('../fonts/MY-FONT.svg#MY-FONT') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

and I've in the folder src/assets/fonts the fonts specified right above in the scss

and I've the import in the main file src/App.vue

<style lang="scss">
@import './assets/styles/_fonts.scss';
</style>

This error occurs:

<e> Module build failed (from ./node_modules/css-loader/dist/cjs.js):
<e> Error: Can't resolve '../fonts/MY-FONT.eot' in '/ABSOLUTE-PATH'

ideas on how to fix it?

I was able to see it working locally only setting this scss code into src/App.vue but once built, the fonts are not properly included, of course.

@font-face {
  font-family: 'Share Tech';
  src: url('../src/assets/fonts/MY-FONT.eot');
  src: url('../src/assets/fonts/MY-FONT.eot?#iefix') format('embedded-opentype'),
    url('../src/assets/fonts/MY-FONT.woff2') format('woff2'),
    url('../src/assets/fonts/MY-FONT.woff') format('woff'),
    url('../src/assets/fonts/MY-FONT.ttf') format('truetype'),
    url('../src/assets/fonts/MY-FONT.svg#MY-FONT') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

thanks for the help