15

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?

Community
  • 1
  • 1
Shimakuro
  • 314
  • 1
  • 2
  • 10

10 Answers10

24

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>
Sven
  • 1,450
  • 3
  • 33
  • 58
user1309946
  • 243
  • 1
  • 3
15

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

MujtabaFR
  • 5,956
  • 6
  • 40
  • 66
  • 1
    Thanks! I dont realy understand why the files gone broken.... but now it works! ;) – Shimakuro Jun 23 '15 at 15:06
  • I had corrupt font files when I installed `ui-grid` via `npm` and replaced them by downloading the files from GitHub. – Mr. B. Mar 08 '17 at 07:29
  • I had the same issue with one (shared hosting) server and at first thought it was because of the theme. The problem was within WinSCP which for some reason uploaded font files in TEXT instead of BINARY mode. Re-uploading files in binary mode fixed the issue. You can check this visually by comparing file sizes, in text mode files were smaller in size by few hundred bytes. – dev101 Apr 21 '18 at 21:44
8

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.

Jeffrey Roosendaal
  • 6,872
  • 8
  • 37
  • 55
6

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.

Community
  • 1
  • 1
Pom12
  • 7,622
  • 5
  • 50
  • 69
  • :-) This helped me using an ExtJS application with springboot and maven mix. Thanks a lot! I wonder how to find out issues like that when not using stackoverflow. I did make a cross check on the maven-war-plugin page but could not grasp an idea of solving my issue. – Dirk Schumacher Jan 17 '18 at 12:34
  • Totally saved me. My icons are alive! Thanks. – xdevx32 Mar 04 '20 at 21:29
3

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.

Agent Zebra
  • 4,410
  • 6
  • 33
  • 66
3

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

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!

BasicIsaac
  • 187
  • 8
0

@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

Darlesson
  • 5,742
  • 2
  • 21
  • 26
0

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.

Marshall Fungai
  • 176
  • 1
  • 6
0

I might be late here but one simple thing worked for me. My FileZilla File Transfers settings was selected as "ASCII" initially. I read somewhere font file transfers should be as Binary. So I changed the settings to Auto and uploaded font files again from original fonts directory from local. And It worked like a charm. Hope this is useful for someone looking for solution. Thank you

enter image description here

Maria K
  • 13
  • 7