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 t

Answer 1

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

Answer 2

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.

Answer 3

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
}

Answer 4

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>

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

Answer 6

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