0

I am developing an app using Vue + Electron and im facing an issue using custom fonts. When running the app in web mode, the icons used with the custom font show ok. But when i build the app using electron-builder, the icons/custom font are not loaded.

I import the custom font in the index.html head tag and the custom fonts are located in src/renderer/assets/fonts folder.

Any help Thanks

Nenad Kaevik
  • 177
  • 1
  • 4
  • 19
  • You will need to make sure your fonts are compiled into electron. This is would be done by webpack when you import the fonts into your source. eg. into your javascript or css. Not in your index.html – CUGreen Mar 01 '20 at 21:39
  • https://webpack.js.org/guides/asset-management/#loading-fonts – Brian Gates Jul 09 '20 at 19:39

1 Answers1

8

To make sure that the font is included in electron, try something like this:

In your renderer main.js

import './scss/app.scss'

In your './scss/app.scss'

@font-face {
    font-family: 'Your Custom Font';
    src: url('../assets/fonts/Your Custom Font.ttf');
}

This should make sure that your font is included with electron by webpack.

CUGreen
  • 3,066
  • 2
  • 13
  • 22