FontAwesome fails to load fonts locally and in electron app
Solution 1
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...
Solution 2
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>
Solution 3
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.
Solution 4
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
Solution 5
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>
Comments
-
nozzleman over 4 years
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 SFNTFailed to decode downloaded font:
file:////path/to/fonts/fontawesome-webfont.woff?v=4.4.0
OTS parsing error: incorrect file size in WOFF headerFailed to decode downloaded font:
file:////path/to/fonts/fontawesome-webfont.ttf?v=4.4.0
OTS parsing error: incorrect entrySelector for table directoryI 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" >
-
nozzleman over 8 yearsUnfortunately, 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.
-
gabrielperales over 8 yearsYou did well answering... It helped me with this issue.
-
Tigran about 8 yearsFor me too it was Grunt. I was mistakenly processing the font file contents as string when copying.
-
nozzleman about 8 yearsOh, well this could have been my mistake too. Thanks!
-
R.J. almost 8 yearsThanks, this was my issue using AEM and Maven to build.
-
gabaum10 almost 8 yearsThat'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}']}
-
Patrick Kwinten over 7 yearscan you explain this a bit more?
-
cralfaro over 7 yearsYou don't need to download the sources again, just make a clean install of your project, and will work
-
Philip over 7 yearsto treat files as binary files I had to add following lines to
.gitattributes
file:*.woff2 -text diff
-
Changwon Choe over 7 yearsThanks! Maven resource plugin filter maybe have replacement issue when meeting font files.
-
Monir almost 7 yearsYou can also acomplish the same using: <nonFilteredFileExtensions> <nonFilteredFileExtension>svg</nonFilteredFileExtension> <nonFilteredFileExtension>woff</nonFilteredFileExtension> <nonFilteredFileExtension>woff2</nonFilteredFileExtension> <nonFilteredFileExtension>ttf</nonFilteredFileExtension> <nonFilteredFileExtension>eot</nonFilteredFileExtension> <nonFilteredFileExtension>otf</nonFilteredFileExtension> </nonFilteredFileExtensions>
-
wrapperapps over 6 yearsWhat is the point of the second resource section with "includes"? Why is not enough to just exclude?
-
Azee almost 6 years@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.
-
Art713 over 5 yearsI 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.?
-
piercus over 5 yearsI 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.