Question 219900 in Html Question posted in
Some basic documentation can be found here.

Html – Custom fonts files cant be find [ELECTRON]

The problem: I added custom fonts, but they dont show on my app

Web console: "Failed to load resource: net::ERR_FILE_NOT_FOUND"

Terminator console: – nothing –

My files structure:

main.js
index.html
| css |
> ... all css files
| resources |
> | fonts |
> > ... all fonts are here

Where I’m referring the fonts?
in ‘config.css’ file, look:

@font-face {
    font-family: 'nexusBody';
    src: url('../resources/fonts/DidactGothic-Regular.ttf');
}

@font-face {
    font-family: 'nexusCapiters';
    src: url('../resources/fonts/OdibeeSans-Regular.ttf');
}

Yes, the fonts’ name are right!

How I add the css files?
with ‘link’ tag in ‘index.html’ file

<head>
    <link rel="stylesheet" href="css/config.css">
</head>

Where did I go wrong?

i’ve tried to put app.setPath('resources', path.join(__dirname, 'resources')); in my ‘main.js’ file, but when I do this, the terminator console say:

UnhandledPromiseRejectionWarning: Error: Failed to set path at C:…main.js:49:9

(Use electron --trace-warnings ... to show where the warning was created)
(node:7960) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

In main.js 49:9 was located the codeline app.setPath('resources', path.join(__dirname, 'resources');, but since it doesn’t work, I removed it.

EDIT 1:

If I move the font file to css directory (same level of css files) and fixing the URL reference, works, but if I level up and add "../" dont works (should be works), about organization I dont like the idea, I need to make works the font and the cascate in different directories, meanwhile this… fonts in css folder >D

Tags:

2

Answers


  1. 0

    What’s the Electron Version? I had the same problem when I updated a project from Vue 2 to Vue 3, and the solution was to put my static resources inside the ‘public’ folder in the root directory. Depending on the version, the pattern to locate the resources inside the application can be changed.

    Login or Signup to reply.
  2. 0

    In this case I think you can try to use the format() param to specify the font type that you’re using like TTF or OTF. Usign you code as example:

    @font-face {
    font-family: 'nexusBody';
    src: url('../resources/fonts/DidactGothic-Regular.ttf') format(truetype);
}

@font-face {
    font-family: 'nexusCapiters';
    src: url('../resources/fonts/OdibeeSans-Regular.ttf') format(truetype);
}

    I guess it can be the problem!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search