Bad compilation of fonts

Describe the bug I am developing an application that includes the material-icons icon library. In development mode the icons are interpreted correctly. But once build there is likely to be a path problem during compilation.

I noticed that other people had the same problem with CDN import but on my side I test with the file locally and with css import like this way.

To Reproduce

1. vue create <app-name> // (Vue3, TS)
2. vue add electron-builder
3. npm i ts-loader@8.2.0
4. import font in main.ts
5. Try in dev / Try in prod

Expected behavior

Visibly when vue compiling the code it sets the font to app:/// . But in reality the application makes them available on app://.

Screenshots

Note: using this import import '@/css/material-icons.css' or this one import '../css/material-icons.css' has no impact on the problem.

Environment (please complete the following information):

• Repo of test with similary probleme: REPO
• vue info:

Environment Info:

 System:
   OS: Windows 10 10.0.22000
   CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
 Binaries:
   Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
   Yarn: 1.22.15 - ~\AppData\Roaming\npm\yarn.CMD
   npm: 8.13.2 - ~\AppData\Roaming\npm\npm.CMD
 Browsers:
   Chrome: Not Found
   Edge: Spartan (44.22000.120.0), Chromium (104.0.1293.47)
 npmPackages:
   @vue/cli-overlay:  5.0.8 
   @vue/cli-plugin-eslint: ~5.0.8 => 5.0.8 
   @vue/cli-plugin-router:  5.0.8 
   @vue/cli-plugin-typescript: ~5.0.8 => 5.0.8 
   @vue/cli-plugin-vuex:  5.0.8 
   @vue/cli-service: ~5.0.8 => 5.0.8 
   @vue/cli-shared-utils:  5.0.8 
   @vue/compiler-core:  3.2.37 
   @vue/compiler-dom:  3.2.37 
   @vue/compiler-sfc:  3.2.37 
   @vue/compiler-ssr:  3.2.37 
   @vue/component-compiler-utils:  3.3.0 
   @vue/eslint-config-typescript: ^9.1.0 => 9.1.0 
   @vue/reactivity:  3.2.37 
   @vue/reactivity-transform:  3.2.37 
   @vue/runtime-core:  3.2.37 
   @vue/runtime-dom:  3.2.37 
   @vue/server-renderer:  3.2.37 
   @vue/shared:  3.2.37 
   @vue/web-component-wrapper:  1.3.0 
   eslint-plugin-vue: ^8.7.1 => 8.7.1 
   typescript: ~4.5.5 => 4.5.5 
   vue: ^3.2.37 => 3.2.37 
   vue-cli-plugin-electron-builder: ^3.0.0-alpha.4 => 3.0.0-alpha.4 
   vue-eslint-parser:  8.3.0
   vue-hot-reload-api:  2.3.4
   vue-loader:  17.0.0 (15.10.0)
   vue-style-loader:  4.1.3
   vue-template-es2015-compiler:  1.9.1
 npmGlobalPackages:
   @vue/cli: Not Found

Additional context Is not a problem with the vue-cli-plugin-electron-builder or electron version. I tryed with the default version, it’s the same problem.

[Happyrain67]

I’m same issue. You can use any fonts with this setting :

package.json : "vue-cli-plugin-electron-builder": "3.0.0-alpha.4",

module.exports = {
  pluginOptions: {
    electronBuilder: {
      ...
      customFileProtocol: './',
    }
  }
}

The customFileProtocol do load fonts with “./fonts/myfont.otf” vs “/fonts/myfont.otf”

If you use the setting “files” dont forgot to add the fonts folder : "/fonts/**/*"

I dont try it with asar, but I imagine that working.

Work with that for me.

[MatthijsBurgh]

No, this plugin is not yet compatible with Vue CLI 5.X

I have been trying to get it working the past few days. But the tests fail in that case. For example only updating electron/spectron to 17/19 is giving errors, which shouldn’t happen. Issues with chromedriver etc. So I am trying to determine what direction to go to update dependencies in small steps.