Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FontAwesome fails to load fonts locally and in electron app

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" >
like image 597
nozzleman Avatar asked Sep 09 '15 09:09

nozzleman


People also ask

Is Fontawesome heavy?

Since fontawesome is a huge file, we have to trim it down to our needs. If we are using only 10 icons then why should we load 100 other icons? The size of font awesome web font is 90KB. Added to that, minified font awesome css is 30KB.

Where do I put Font Awesome Files?

Add Font Awesome Files to Your ProjectCopy the /webfonts folder and the /css/all. css file into your project's assets directory where other images and CSS are stored. You'll want to keep them in the same directory.


2 Answers

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> 
like image 185
Azee Avatar answered Sep 20 '22 04:09

Azee


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.

like image 27
user892592 Avatar answered Sep 19 '22 04:09

user892592