FontAwesome - Failed to decode downloaded font

问题:

I found allready this: https://stackoverflow.com/search?q=Failed+to+decode+downloaded+font

But the Answers dont help to fix my problem =/

I got on my page this errors in console:

Failed to decode downloaded font: http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.woff2
    index.php?option=com_kunena&view=category&layout=list&Itemid=129&templateStyle=9:1 Failed to decode downloaded font: http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.woff
    index.php?option=com_kunena&view=category&layout=list&Itemid=129&templateStyle=9:1 Failed to decode downloaded font: http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.ttf

URL to my page: http://devcomlink.kunena.dev-monkeys.com/index.php?option=com_kunena&view=category&layout=list&Itemid=129&templateStyle=9

in Firefox and IE11 the icons totaly dont load...

Have anyone a idea how i can fix this?

回答1:

The problem isn't with your HTML or CSS code... It must be with the font files or the server,

because normal font files should contain codes and can be downloaded when opened in browser like this : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0

While your files looks empty without any code even when downloaded: http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.eot?v=4.3.0

Try to replace the files ...

回答2:

I'm just answering this for later viewers. If you are working with a maven-war-plugin make sure you exclude the .woff and .ttf files in the filtering or maven will make the files corrupt.

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <configuration>
        <filteringDeploymentDescriptors>true</filteringDeploymentDescriptors>
        <webResources>
            <resource>
                <directory>${basedir}/src/main/webapp</directory>
                <targetPath />
                <filtering>true</filtering>
                <excludes>
                    <exclude>**/*.woff</exclude>
                    <exclude>**/*.woff2</exclude>
                    <exclude>**/*.ttf</exclude>
                </excludes>
            </resource>
        </webResources>
    </configuration>
</plugin>

回答3:

I had the same problem, and finally managed to solve it. It may help someone.

I have quite a large .htacces file, with a lot of RewriteCond's and RewriteRule's, and also used the following line to filter some folders from those conditions:

RewriteRule  ^(css|functions|js|media|tpl|vendor)($|/) - [L]

---

Upon adding the fonts folder (simply called fonts, and located in public_html/), the problem was solved.

RewriteRule  ^(css|fonts|functions|js|media|tpl|vendor)($|/) - [L]

---

Note that this line should be fairly at the top of your .htaccess file to work.

回答4:

Similar to the maven-war-plugin usage, if you are using maven-resources-plugin you need to specify that font files extensions shouldn't be filtered :

<plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <version>2.7</version>
    <configuration>
        <encoding>UTF-8</encoding>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>

Got the solution from this SO answer.

回答5:

For what it's worth, I ran into this issue on my shared web server. The permissions on my font files and the enclosing folder were incorrect. Took me forever to figure it out. Changed them to 755 for the folder and 644 for the font files. Works perfectly now.

回答6:

A little late to the game, but this is what fixed it for me on .NET MVC should work on WebForms too. If you're using FA or GI to decorate your Login form, the Fonts folder will be restricted. You can give permission in advance by doing this in your web.config

<location path="fonts">
    <system.web>
     <authorization>
     <allow users="*" />
     </authorization>
    </system.web>
</location>

Hope this helps somebody out there!

回答7:

@mujtaba-fadhel answer should resolve the issue in most cases. But if you are using git, you might want to set your font extensions to binary just in case its being converted to text. You need to create a .gitattributes file in your project root.

This is an example how it could look like:

*.svg text eol=lf

*.eot binary
*.ttf binary
*.woff binary

See more about that here

回答8:

It might be list of multiple reason from corrupted files to server problems. I simply fixed my problem by changing to a fontawesome CDN link. Hope that helps.

回答9:

The problem isn't with your HTML or CSS code. It must be with the font files or the server. If your resource files haven't any issue, use following code with maven-resources-plugin. Add this code to your pom.xml file.

<build>
        <resources>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
                <excludes>
                    <exclude>static/vendor/font-awesome/webfonts/**</exclude>
                </excludes>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>false</filtering>
                <includes>
                    <include>static/vendor/font-awesome/webfonts/**</include>
                </includes>
            </resource>
        </resources>
</build>