Search code examples
vue.jsbuildfontselectronelectron-builder

Custom font is not showing on Electron + Vue App

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

Solution

  • 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.