2

What does not work

I am trying to add some custom local fonts into my Electron React App, but i would like to do it without installing the fonts on my computer.

Current partial solution

The only way, which works for me, it is to install the fonts on my computer, but i would like to find a better solution.

I placed my fonts files into:

assets/fonts/

And i tried to use it in my scss file located in:

src/renderer/scss/commons/_fonts.scss

In this way:

@font-face {
  font-family: 'Bariol Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Bariol Regular'),
    url('/assets/fonts/Bariol-Regular.ttf') format('ttf');
  }

These are my current Electron versions

"electron": "^15.1.0",
"electron-builder": "^22.11.7",
"electron-devtools-installer": "^3.2.0",
"electron-notarize": "^1.1.1",
"electron-rebuild": "^3.2.3",

How html has been loaded into electron:

    new HtmlWebpackPlugin({
      filename: path.join('index.html'),
      template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true,
      },
      isBrowser: false,
      env: process.env.NODE_ENV,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: webpackPaths.appNodeModulesPath,
    }),

The React App component has been mounted into the index.ejs file on the

<div id="root"></div>

And the scss file which contains the fonts rule, has been imported into the App.tsx file.

import './App.global.scss';

I would be grateful if someone could help me.

And i hope this could help someone else.

Thank you!

Davide Taurisano
  • 46
  • 3
  • Welcome to Stack Overflow! Please read [ask] and [edit] your question accordingly to include a description of what "doesn't work" and what you have tried to solve this (different paths, ...). Also, please share how you load the HTML linked to the CSS file from Electron, as this may make a difference. Thanks! – Alexander Leithner Aug 24 '22 at 15:19
  • Thank you for your comment Alexander, i have updated my question! – Davide Taurisano Aug 25 '22 at 06:59

1 Answers1

0

It's hard to tell how similar our setup is, but hopefully this helps someone.

My issue was putting the fonts in my public folder when they're supposed to be under src.

I made a fonts folder under src, then I declared the font in a css file. e.g:

/* src/index.css */
@font-face {
  font-family: 'KleeOne';
  src: url('./fonts/KleeOne-SemiBold.ttf');
}

After that, I imported the css in my index.js and it worked:

/* src/index.js */
import './index.css';
Chris Pavs
  • 85
  • 5