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.

Praetor

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 – Lurette

were you able to solve the issue? – Tabret

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

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

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

Tanatanach

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] – Information

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

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

Mullein

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

Cervix

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

@Siriasis 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. – Featureless

what is the flag -text diff for? and why wouldn't it be -text -diff? also why not binary? – Fourth

Answer 4

For anyone who is having this issue at AWS Amplify, do the following:

1. Go to your AWS Amplify app
2. Click on App Settings->Rewrites and redirects
3. Change the Source address to:
   </^[^.]+$|\.(?!(css|gif|ico|otf|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

NOTE: The only thing I had to do was to add the otf in the original AWS Amplify config because it was missing. The rest of the configs were already there.

Anneliese

I also added woff2 to the matching expression above. – Wortman

Answer 5

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.

Canossa

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

Thanks @Measure I had this exact problem. Created .woff and .woff2 with anyconv.com/otf-to-woff2-converter and the woff2 file was corrupted or not compressed properly (larger than the source .otf file). – Thermocline

Answer 6

I had the same issue and that was because of the git treating these files as text. So while checking out the files in build agents, binary was not maintained.

Add this to your .gitattributes file and try.

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

Agathy

someone made the same comment but had "-text diff" instead of "binary". do you know what the difference between the two flags are? – Fourth

Answer 7

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 */
}

Handclasp

Answer 8

try

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

and rename your file to application.css.scss

Shortwave

Answer 9

When using angular-cli, this is what works for me:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <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="application/font-woff2" />
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
            <rules>
                <rule name="AngularJS" stopProcessing="true">
                    <match url="^(?!.*(.bundle.js|.bundle.js.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.chunk.js|.chunk.js.map|.png|.jpg|.ico|.eot|.svg|.woff|.woff2|.ttf|.html)).*$" />
                    <conditions logicalGrouping="MatchAll">
                    </conditions>
                    <action type="Rewrite" url="/"  appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Millennial

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

Edit the web.config – Terwilliger

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

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

Answer 10

I was getting the following errors:

Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

which was fixed after downloading the raw file directly from:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

The problem was that there was a proxy error when downloading the file (it contained the HTML error message).

Educate

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

Answer 11

Go to the address below on GitHub and download each of the FontAwesome files.

https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome

...but instead of right-clicking and saving the link as, click on each of the files and use the 'Download' button to save them.

I found that saving the link as downloaded an HTML page and not the FontAwesome file binary itself.

Once I had all of the binaries it worked for me.

Moonlighting

Answer 12

What helped me was that I changed the order. The .eot get's loaded first, but my error was on loading the .eot. So I ditched the .eot as a first src for woff2 and the error went away.

So code is now:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

And is was:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.eot?9h1pxj');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Mireielle

What are all those wacky characters after the file extension, i.e. woff2?9h1pxj? – Piteous

It’s an anti-caching mechanism. If you update your icons in the package, the hash changes and all browsers then load that new file instead of the cached one containing the old icons – Mireielle

Answer 13

If you use bootstrap then Update bootstrap css(bootstrap.min.css) file and fonts files. I fixed my problem with this solution.

Gilleod

Answer 14

For angular-cli and webpack users I suspected that there is some issue while importing the fonts in css file , so please also provide url location encoded with single quotes as following -

@font-face {
font-family: 'some_family';
src: url('./assets/fonts/folder/some_family-regular-webfont.woff2') format('woff2'),
     url('./assets/fonts/folder/some_family-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

This post might be old , but this is the solution which worked for me .

Shermy

Answer 15

I've had the same issue.

Adding the font version (e.g. ?v=1.101) to the font URLS should do the trick ;)

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v15-latin-600.eot?v=1.101'); /* IE9 Compat Modes */
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v15-latin-600.woff2?v=1.101') format('woff2'), /* Super Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.woff?v=1.101') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Clicking (right mouse click) on font's TTF version and selecting "Get Info" (Mac OSX) "Properties" (Windows) in context menu should be enough to access the font version.

Diverse

Answer 16

i had the same problem, running on a node.js server. the problem was not coming from my navigator, but from the server !
i was simply using the fs.readFile(...) function. this was enough for little files (i used 10ko max), but my fonts files where about 150ko, which was wayyy too much for all of this asynchronysation stuff :/
i solved this problem using a stream :
(data is sent as it is read by the stream)

const stream = fs.createFileStream(filename);

stream.on("error", () => {
    // error : file does not exist, etc.
    res.setHeader("content-type", "text/plain");
    res.statusCode = 404;
    res.end("ouuups, problem :/");
}

stream.on("open", () => {
    // good
    res.setHeader("content-type", mime);
        // mime is your font / file mime-type
    res.statusCode = 200;
    stream.pipe(res);
}

Infeld

Answer 17

My issue was that I was declaring two fonts, and scss seems to expect that you declare the name of the font.

after your @font-face{} you must declare $my-font: "OpenSans3.0 or whatever";

and this for each font-face.

:-)

Standardbearer

Are you talking about font-family? – Tutankhamen

can't remember now, sorry :-) – Standardbearer

Answer 18

If your are using Chrome, try adding an opentype (OTF) version of your font as shown below:

    ...
     url('icomoon.otf') format('opentype'),
    ...

Cheers!

Griswold

Answer 19

I am using ASP.NET with IIS and it turns out I just needed to add the MIME-type to IIS: '.woff2' / 'application/font-woff'

Neddie

Answer 20

I had same problem when I opened and saved .woff and .woff2 files through Sublime Text with EditorConfig option end_of_line = lf. I just copied files to font folder without opening them into Sublime and problem was solved.

Hemostat

Answer 21

If other answers didn't work try:

1. check .htaccess file

   # Fonts
# Add correct content-type for fonts
   

   AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg
   

2. clear server cache

3. clear browser cache & reload

Edwyna

Answer 22

I've had this problem twice already with icon fonts generated by icomoon. In both cases one of the icons was using the "space character" (20)

It seems that using the space character (code 20) is triggering this issue. After I changed the code to something other than 20 (space), the font worked properly in Chrome.

Mahan

Answer 23

I got this message because my .htaccess tried to rewrite these types of files. Just adding the extension (in my case added woff and woff2) solved the issue.

RewriteRule \.(js|css|svg|gif|jpg|jpeg|png|woff|woff2)$ -  [L]

Ketene

Answer 24

I had an issue where fonts were working locally, but when I deployed they were not. I was loading my font file using lowercase characters, but the font file had uppercase characters in its name (e.g. I was doing url("./fonts/helevectia/helevectia-regular.ttf") but the name should have been url("./fonts/Helevectia/Helevectia-Regular.ttf")). Locally this seems to have worked, but when I deployed it wasn't. I fixed the capitalization and no longer got the error.

Orthodox

Answer 25

This issue also happened to me. For my specific situation, it was because I used git-lfs (Git Large File Storage), for hosting certain assets, such as web fonts, and jpeg images. In this situation, you need to install git-lfs to inflate the binary file assets.

Hysteresis

Answer 26

For it is fixed by using below statement in app.web.scss
    $fa-font-path:   "../../node_modules/font-awesome/fonts/" !default;
    @import "../../node_modules/font-awesome/scss/font-awesome";

Monition

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

Answer 27

Check your font's css file. (fontawesome.css/fontawesome.min.css), you will see like this:

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot-v=4.6.3.htm');
    src: url('../fonts/fontawesome-webfont.eot#iefix-v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2-v=4.6.3.htm') format('woff2'), url('../fonts/fontawesome-webfont.woff-v=4.6.3.htm') format('woff'), url('../fonts/fontawesome-webfont.ttf-v=4.6.3.htm') format('truetype'), url('../fonts/fontawesome-webfont.svg-v=4.6.3.htm#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

you will see version tag after your font's file extension name. Like:

-v=4.6.3

You just need to remove this tag from your css file. After removing this, you need to go to your fonts folder, And you will see:

And, Form these font's files, you just need to remove the version tag -v=4.6.3 from the file name.

Then, The problem will be sloved.

Beem