How to import fonts (not coming from CDNs) 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

[Jamie-Yang]

There is a discussion of similar issues here: sass/sass#1015
Use absolute paths for urls in sass files that are imported by other sass files should solve this case.

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

[silversonicaxel]

I'm having difficulties to replicate a proper build in the current boilerplate.
The @use approach still works locally as the previous suggested.
But it also still fails in the production version created with the command yarn build , it fails to load properly the fonts from the dist/fonts/ folder.
Files are indeed properly stored in dist/fonts/ but in the dist/static/css/app.XYZ.css the code looks like this

@font-face{
  font-family:"Share Tech";
  src:url(./fonts/0496a616.eot);
  src:url(./fonts/0496a616.eot??#iefix) format("embedded-opentype"),
    url(./fonts/73d84f20.woff2) format("woff2"),
    url(./fonts/65db2773.woff) format("woff"),
    url(./fonts/eaa20d1b.ttf) format("truetype")

while it should be like this, with a proper path to reach the font folder

@font-face{
  font-family:"Share Tech";
  src:url(../../fonts/0496a616.eot);
  src:url(../../fonts/0496a616.eot??#iefix) format("embedded-opentype"),
    url(../../fonts/73d84f20.woff2) format("woff2"),
    url(../../fonts/65db2773.woff) format("woff"),
    url(../../fonts/eaa20d1b.ttf) format("truetype")

Not sure how currently the boilerplate could be fixed, or how could be the correct implementation both for local dev yarn serve and production yarn build - any further ideas? thanks a lot

[silversonicaxel]

Any news about how to serve fonts for production? as mentioned above, locally all works fine, but for production not yet.

[Jamie-Yang]

build.publicPath should be an absolute path. Usually it will be a CDN address. 0828202

[silversonicaxel]

I get your point, but it is out of scope...
I'm talking about local fonts.
In the README.md file https://github.com/Jamie-Yang/vue3-boilerplate#readme you describe like this the architecture

├─ public           // static assets.
├─ service          // commands and webpack configurations.
├─ src
│  ├─ assets        // assets such as images or font files.
│  ├─ components    // universal Vue components.
│  ├─ router        // view's routers config.
│  ├─ store         // Vuex store modules.
│  ├─ typings       // typescript .d.ts files.
│  └─ views         // pages.

but apparently the src/assets/ is not able to manage fonts, or at least I couldn't find a way.

[Jamie-Yang]

I think I got your point too. 🤣
Have you checked the change log link in my last reply?
I cloned your project, changed the same configuration and the fonts ended up working fine.