FontAwesome fails to load fonts locally and in ele

2019-02-02 20:07发布

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" >

8条回答
何必那么认真
2楼-- · 2019-02-02 20:48

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...

查看更多
我想做一个坏孩纸
3楼-- · 2019-02-02 20:52

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

查看更多
登录 后发表回答