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.
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.
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>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.
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
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.
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
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.
:-)
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>
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).
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.
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 .
If your are using Chrome, try adding an opentype (OTF) version of your font as shown below:
...
url('icomoon.otf') format('opentype'),
...
Cheers!
If you use bootstrap then Update bootstrap css(bootstrap.min.css) file and fonts files. I fixed my problem with this solution.
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'
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.
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.
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!
If other answers didn't work try:
check .htaccess file
# Fonts# Add correct content-type for fontsAddType application/vnd.ms-fontobject .eotAddType application/x-font-ttf .ttfAddType application/x-font-opentype .otfAddType application/x-font-woff .woffAddType application/x-font-woff2 .woff2AddType image/svg+xml .svgclear server cache
- clear browser cache & reload
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.
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";
I was having the same issue, this worked for me https://github.com/webpack/webpack/issues/1468
来源：https://stackoverflow.com/questions/34288778/failed-to-decode-downloaded-font-ots-parsing-error-invalid-version-tag-rails