Failed to decode downloaded font, OTS parsing error: invalid version tag + rails 4

Question

I am doing assets pre-compile, and running the application in production mode. After compilation when I load the my index page I got followings warnings in the chrome console:

Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag

The issue is its not loading icons instead of that its showing squares.

we used the custom fonts and the code is:

@font-face {
  font-family: 'icomoon';
  src: font-url('icomoon.eot');
  src: font-url('icomoon.eot?#iefix') format('embedded-opentype'),
       font-url('icomoon.ttf') format('truetype'),
       font-url('icomoon.woff') format('woff'),
       font-url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

I don't know what is missing from my end . I searched a lot and also tried solution but not got any success.In development mode its working fine but don't know why its showing square in the production mode.

Solution 1

I got the exact same error, and in my case it turned out to be because of a wrong path for the @font-face declaration. The web inspector never complained with a 404 since the dev server we're using (live-server) was configured to serve up the default index.html on any 404:s. Without knowing any details about your setup, this could be a likely culprit.

Solution 2

If running on IIS as the server and .net 4/4.5 it might be missing mime / file extension definitions in Web.config - like this:

<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" />
    </staticContent>
</system.webServer>

Solution 3

I was having the same issue., OTS parsing error: Failed to convert WOFF 2.0 font to SFNT (index):1 Failed to decode downloaded font: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2

If you got this error message while trying to commit your font then it is an issue with .gitattributes "warning: CRLF will be replaced by LF"

The solution for this is adding whichever font you are getting the issue with in .gitattributes

*.ttf     -text diff
*.eot     -text diff
*.woff    -text diff
*.woff2   -text diff

Then I deleted corrupt font files and reapplied the new font files and is working great.

Solution 4

I had a corrupted font, although it appeared to be loading without problem and under Sources in Chrome devtools appeared to display, the byte count wasn't correct, so I downloaded again and it resolved it.

Solution 5

Just state format at @font-face as following:

@font-face {
  font-family: 'Some Family';
  src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
}

View more solutions

Comments

[Craig]

It could be a number of things: the character encoding could be incorrect or the font itself might be corrupted. Can you open the font in Font Book or similar? A quick Google reveals a bug in the Chromium browser version 45: code.google.com/p/chromium/issues/detail?id=545924

[coder]

were you able to solve the issue?

[HoseinGhanbari]

In my case, I have to purge cloudflare cache and wait some minutes to let the time fix the issue !

[jcubic]

I had the same problem and found that I need to have woff2 font before woff for chrome.

[Arnav M.]

don't just post links... post answer with solution because links may go down in future.

[andreas]

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

[Saiyaff Farouk]

It'd be great if you can say, for which file you've to add these?

[Skorunka František]

Edit the web.config

[Saiyaff Farouk]

I couldn't file a web.config file in the angular-cli project. Using the version 1.3.0. Any clue?

[Skorunka František]

Web.config is only used when you host your client app on IIS (incl. Azure Web Services).

[Omar]

where does that file live? will the browser even know it exists? How?

[fearis]

If this is reason of redirect you can filter it by file extension RewriteRule !\.(js|gif|css|jpg|otf|eot|png)$ /redirect [R=301,L]

[Nathan B]

Are you talking about font-family?

[Antoine]

can't remember now, sorry :-)

[omadawn]

I didn't think to check the file itself.. make sure also not to download this link directly ("save link as"), but enter it and use the "download" button.

[Sinjai]

In my case, ASP.NET MVC bundling & minification essentially changed the location of the CSS without changing the relative paths therein. Had to delete the already-minified file and use a CssRewriteUrlTransform in BundleConfig.

[Michael Nelles]

got what issue exactly?

[x-of Rezbach]

codeFailed to decode downloaded font: localhost:52963/css/…

[elliottregan]

@Omar That file should be in your root directory, and doesn't have anything to do with the browser. It describes how git is going to manage line endings in different file formats. Git can corrupt some filetypes by trying to change line endings.

[rob-gordon]

If using woff2, I had this problem after using online converters. Needed to use the command line woff2 converter (available through homebrew)