FontAwesome fails to load fonts locally and in electron app

Question

I have downloaded FontAwesome using npm and then copied the css-file and the fonts into the right folders in the root-diretory of my electron-application using grunts copy task.

So far so good. Everything is where it is supposed to be.

Now, when i am referencing FontAwesome in my app, the icons do not get loaded. These are the errors that I get in the console:

Failed to decode downloaded font:
file:///path/to/fonts/fontawesome-webfont.woff2?v=4.4.0
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

Failed to decode downloaded font:
file:////path/to/fonts/fontawesome-webfont.woff?v=4.4.0
OTS parsing error: incorrect file size in WOFF header

Failed to decode downloaded font:
file:////path/to/fonts/fontawesome-webfont.ttf?v=4.4.0
OTS parsing error: incorrect entrySelector for table directory

I have already tried to modify FontAwesome's css file by removing all the version parameters but this does not seem to be the problem. The Issues comes up both by starting the app via electron . and when viewing the html-file in the browser.

UPDATE

To Answer some comments:

This problem occurrs in electron as well as in the browser (tested in chrome and firefox)
I am using the newest versions of both, FontAwesome (4.4.0) and Electron (0.32.1) (fresh install via npm)
css is loaded like: <link rel="stylesheet" type="text/css" href="css/font-awesome.css" >

assuming that you have the file in physical location on server, this issue is caused because server is not allowing files with `.woff` extension. you have to add `.woff` in allowed MIME types. In IIS , go to IIS server > your web site . click on MIME Type under IIS section and right click and add new MIME type with file name extension `.woff` and MIME Type `text/woff` — J Santosh, Sep 09 '15 at 10:01
@JSantosh, thx for the comment. unfortunately, the files are not on a server. they should ger deliverted with an electron app, so basically, they are locally. — nozzleman, Sep 09 '15 at 10:35
Do you have the same problem when you open the HTML files in a browser and not electron? — Yan Foto, Sep 09 '15 at 12:58
@YanFoto, Yes, this happens in electron as well as in the browser. — nozzleman, Sep 09 '15 at 12:59
Could you also provide the CSS snippet using to load the fonts? — Yan Foto, Sep 09 '15 at 14:18
Its the default `@font-face` directive within font-awesome.css which I have included in the head of my html without modifications. See https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L9 — nozzleman, Sep 09 '15 at 15:21
If this happens in the browser as well then it probably has nothing to do with the electron. I tried to reproduce the error but couldn't. It might be helpful if you could mention in your question which electron version/FA version/browser version you are using. — Yan Foto, Sep 09 '15 at 17:41

score 68 · Answer 1 · answered Jan 13 '16 at 16:45

68

I had a similar issue (perhaps this answer will help someone). I use Maven to build projects (Java + JS). Maven Filter Plugin corrupted binary font files. I had to add includes and excludes:

    <resources>
        <resource>
            <directory>${project.sources}</directory>
            <filtering>true</filtering>
            <excludes>
                <exclude>**/*.woff</exclude>
                <exclude>**/*.ttf</exclude>
            </excludes>
        </resource>
        <resource>
            <directory>${project.sources}</directory>
            <filtering>false</filtering>
            <includes>
                <include>**/*.woff</include>
                <include>**/*.ttf</include>
            </includes>
        </resource>
    </resources>

answered Jan 13 '16 at 16:45

Azee

1,809
17
23

1

You did well answering... It helped me with this issue. – gabrielperales Jan 18 '16 at 17:22
Thanks, this was my issue using AEM and Maven to build. – R.J. Jun 07 '16 at 20:12
2

You don't need to download the sources again, just make a clean install of your project, and will work – cralfaro Sep 13 '16 at 08:41
Thanks! Maven resource plugin filter maybe have replacement issue when meeting font files. – Changwon Choe Dec 19 '16 at 09:13
9

You can also acomplish the same using: svg woff woff2 ttf eot otf – Monir Jun 05 '17 at 19:01
1

What is the point of the second resource section with "includes"? Why is not enough to just exclude? – wrapperapps Nov 30 '17 at 18:36
1

@wrapperapps - AFAIK, if you'll exclude files from resources they won't get into the target build. You still have to include them BUT WITHOUT filtering. – Azee Jul 24 '18 at 02:51

score 31 · Answer 2 · answered Nov 18 '15 at 23:36

31

In my situation, Git was treating the file as a text file, and messing with its "line endings". This was corrupting the file.

Adjusting the .gitconfig to recognize *.woff files as binary, then removing the file, and adding a new copy from https://github.com/FortAwesome/Font-Awesome/raw/v4.2.0/fonts/fontawesome-webfont.woff solved the issue for me.

answered Nov 18 '15 at 23:36

user892592

411
4
3

3

to treat files as binary files I had to add following lines to ```.gitattributes``` file: ```*.woff2 -text diff``` – Philip Oct 04 '16 at 08:42

score 7 · Answer 3 · answered Jan 29 '18 at 14:19

7

I faced same issue, using API Gateway to serve static font-files on Amazon S3.

I fixed it by adding */* as Binary Media Types on the AWS Console.

More information on binary media types management on https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html

answered Jan 29 '18 at 14:19

piercus

1,136
9
17

I have the same issue, setting binary media types to */* is not working for me. Did you just set binary media types or you also changed headers, etc.? – Art713 Jan 16 '19 at 15:56
I think I followed the guide and I changed Content Handling value to "convert as binary". But i'm not 100% sure and I cannot double check now. – piercus Jan 16 '19 at 16:02

score 5 · Answer 4 · answered Jun 04 '16 at 06:53

For some people who are deploying to IIS, adding this to web.config file (the main one, not the one inside Controller directory) might be of help.

<system.webServer>
   <staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
</system.webServer>

score 3 · Accepted Answer · answered Sep 11 '15 at 05:51

3

The Problem was in my grunt-file. I tried to reproduce the issue by simply downloading all dependencies manually at their vendors websites and placed them in the corresponding script-folder of my project - suddenly it worked.

I switched to gulp now and it still works. No idea what i was doing wrong with grunt though...

answered Sep 11 '15 at 05:51

nozzleman

9,529
4
37
58

2

For me too it was Grunt. I was mistakenly processing the font file contents as string when copying. – Tigran May 30 '16 at 16:28
Oh, well this could have been my mistake too. Thanks! – nozzleman May 30 '16 at 18:45
That's what my mistake was as well. I had to explicitly exclude the files from the copy processing like this: `options: { process: processFiles, noProcess: ['www/**/*.{png,gif,jpg,ico,psd,svg,ttf,otf,woff,woff2,eot}']}` – gabaum10 Jun 28 '16 at 14:27

score 1 · Answer 6 · answered Sep 09 '15 at 23:42

try the following, call the font-face as the following in the beginning of your CSS file.

@font-face {
    font-family: FontAwesome;
    src: url(../fonts/fontawesome-webfont.eot?v=4.0.3);
    src: url(../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3) format('embedded-opentype'), url(../fonts/fontawesome-webfont.woff?v=4.0.3) format('woff'), url(../fonts/fontawesome-webfont.ttf?v=4.0.3) format('truetype'), url(../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular) format('svg');
    font-weight: 400;
    font-style: normal
}

Unfortunately, this didn't do the trick. btw, the only thing that changed was the version parameter. It doesn't even get processed since i try this locally. but thx anyway. — nozzleman, Sep 10 '15 at 05:19

score 1 · Answer 7 · answered Sep 22 '15 at 11:54

If you are using the bower you could rewrite your font-face to:

@font-face {
  font-family: FontAwesome;
  src: url(font-awesome/fonts/fontawesome-webfont.eot);
  src: url(font-awesome/fonts/fontawesome-webfont.eot?#iefix) format('embedded-opentype'), 
       url(font-awesome/fonts/fontawesome-webfont.woff) format('woff'), 
       url(font-awesome/fonts/fontawesome-webfont.ttf) format('truetype'), 
       url(font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular) format('svg');
  font-weight: 400;
  font-style: normal
}

can you explain this a bit more? – Patrick Kwinten Sep 06 '16 at 11:56 — Patrick Kwinten, Sep 06 '16 at 11:56

score 0 · Answer 8 · answered Apr 03 '17 at 17:24

I'm sure this is solved, but this worked for me, so... I'm gonna leave this here:

I just had the same issue with a font I had used before. Turned out this was caused by a problem with FTP. The file was uploaded as text (ASCII) instead of binary, which corrupted the file. I simply re-uploaded the font files, and then it all worked.

FontAwesome fails to load fonts locally and in electron app

8 Answers8

Linked