Failed to decode downloaded font, OTS parsing erro

问题:

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.

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

回答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>

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

I hope it helps.

回答4:

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.

:-)

回答5:

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

回答6:

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.

回答7:

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>

回答8:

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

回答9:

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.

回答10:

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

回答11:

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 .

回答12:

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

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

Cheers!

回答13:

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

回答14:

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'

回答15:

After trying lots of other approaches, and lots of re-installs and checks, I have just fixed the issue by clearing out browsing data from Chrome (cached images and files) and then refreshing the page.

回答16:

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.

回答17:

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.

Hope it helps anyone!

回答18:

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

回答19:

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.

回答20:

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";

回答21:

I was having the same issue, this worked for me https://github.com/webpack/webpack/issues/1468