Custom font in Electron + React application not working after running the Windows installer

Question

I'm building an Electron app that needs to run on Windows. The stack exists of React + Typescript, SCSS + TailwindCSS. The style is compiled with postcss. The Electron app is built with electron-builder.

After compiling the style, creating new Electron installer for Windows and running this installer the included font's don't seem to work.

When checking the build folder that functions as the output folder for electron-builder, all font files are present in the static/media folder. If I check the link to the font files when the Electron app is running, the link in the CSS also links to the generated static folder where the files are.

Files & code

• The font files are located in: src/assets/font/;
• For each weight I use (only 2) there are: .ttf, .woff, woff2, .svg and .eot available;
• The font is loaded through SASS:

@font-face {
    font-family: 'Montserrat';
    font-weight: 500;
    src: url('../font/Montserrat-Medium.ttf') format('truetype'),
         url('../font/Montserrat-Medium.woff2') format('woff2'),
         url('../font/Montserrat-Medium.woff') format('woff'),
         url('../font/Montserrat-Medium.svg') format('svg'),
         url('../font/Montserrat-Medium.eot') format('eot');
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 700;
    src: url('../font/Montserrat-Bold.ttf') format('truetype')
         url('../font/Montserrat-Bold.woff2') format('woff2'),
         url('../font/Montserrat-Bold.woff') format('woff'),
         url('../font/Montserrat-Bold.svg') format('svg'),
         url('../font/Montserrat-Bold.eot') format('eot');
}

• Then it is loaded in TailwindCSS as basic font, configured in the tailwindconfig:

theme: {
    fontFamily: {
        sans: ['Montserrat', 'sans-serif'],
        body: ['Montserrat'],
        bold: ['Montserrat']
    },
... rest of config file

Facts

• The font works if it is installed locally on Windows.
• When it's not found, the app doesn't fallback to a sans-serif font.
• The font files and link to the font files is correct when checking the CSS in the running application (Chromium element inspector).
• All other styles work correctly, only the font isn't working. So it looks like the CSS is compiled and loaded properly.

Checked resource

• Custom font is not showing on Electron + Vue App (yes it's Vue, but the answer still is: use @font-face).
• https://www.reddit.com/r/electronjs/comments/bhaiva/how_to_load_custom_fonts_in_electron_app/
• https://discuss.atom.io/t/how-to-use-specific-font-in-electron-app/32215
• https://github.com/electron-userland/electron-webpack/issues/163
• https://dev.to/theola/electron-app-with-webpack-bootstrap-fontawesome-and-jquery-a-complete-guide-54k2

Questions

1. When running the installer.exe that is created with electron-builder, do you need to include an assets folder and/or other files in the installation folder (e.g.: builder-effective-config.yaml)?
2. Are there other ways to include a local font? I don't want to use a CDN or other online source.

All resources I currently found say it should work when using @font-face.

Note: if you require more information, please let me know and I'll provide it.

Answer 1

Ok, after a little more testing/checking the issue was the React build. It loaded an older configuration, that was breaking the font load.

Thanks all who read it!