Fonts are not displayed when using electron-compile

[m0g]

Hi,

I'm trying to switch my project to electron-compile but for some reason I can't get to display my custom fonts (in this case font-awesome).

Is there a custom rule I have to add in .compilerc to display my font properly?

Like for instance:

"application/octet-stream": {
    "passthrough": true
}

I have to precise that I am using less.

[anaisbetts]

Can you check the console? You usually need a CSP tag or else you get blocked

[m0g]

I'm getting error like:

Failed to decode downloaded font: file:///home/loic/code/ansel/src/less/fonts/WOFF/Roboto-Thin-webfont.woff

But the paths seems to be wrong.

I've tried playing with the .compilerc as well:

{
  "text/less": {
    "relativeUrls": false
  },
  "application/javascript": {
    "presets": [
      "stage-1",
      "react"
    ],
    "plugins": ["syntax-decorators", "transform-es2015-modules-commonjs"]
  }
}```

[anaisbetts]

What is the path supposed to be?

[m0g]

Should be this: file:///home/loic/code/ansel/static/fonts/WOFF/Roboto-Thin-webfont.woff

[m0g]

So some updates about my issue, that I am still unable to resolve.

I'm trying to use electron-compile but it is somehow refusing to load font-awesome fonts. So all the fonts are being displayed, except for font awesome. I've tried to re-download it and open it with a font manager tool to see if it's corrupted, but it isn't.

Here is my fonts.less:

@rootFolder: ~"./../..";

/*FONT AWESOME*/
@font-face {
  font-family: 'FontAwesome';
  src: url('@{rootFolder}/static/fonts/fontawesome-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('@{rootFolder}/static/fonts/Roboto-Regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('@{rootFolder}/static/fonts/Roboto-Thin-webfont.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}

/*Roboto Mono*/
@font-face {
  font-family: 'Roboto Mono';
  src: url('@{rootFolder}/static/fonts/roboto-mono_regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

My .compilerc:

{
  "text/less": {
    "dumpLineNumbers": "comments",
    "relativeUrls": false
  },
  "application/javascript": {
    "presets": [
      "stage-1",
      "react"
    ],
    "plugins": ["syntax-decorators", "transform-es2015-modules-commonjs"]
  }
}

fonts folder:

ls static/fonts -al                                                                                                                                         
total 228
drwxr-xr-x 2 loic loic  4096 Apr  6 17:50 .
drwxr-xr-x 3 loic loic  4096 Apr  6 11:39 ..
-rw-r--r-- 1 loic loic 98024 Dec 22 21:50 fontawesome-webfont.woff
-rw-r--r-- 1 loic loic 66596 Oct 13 18:20 roboto-mono_regular.woff
-rw-r--r-- 1 loic loic 25020 Oct 13 18:20 Roboto-Regular-webfont.woff
-rw-r--r-- 1 loic loic 24944 Oct 13 18:20 Roboto-Thin-webfont.woff

And the output from the web console

And the reference to the project: https://github.com/m0g/ansel/tree/electron-compile