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

User · Answer

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

User · Answer

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

User · Answer

If other answers didn t work try    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 clear server cache clear browser cache  amp  reload

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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     -

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

When using angular-cli  this is what works for me    lt  xml version  1 0  encoding  utf-8   gt   lt configuration gt       lt system webServer gt           lt staticContent gt               lt remove fileExtension   eot    gt               lt mimeMap fileExtension   eot  mimeType  application vnd ms-fontobject    gt               lt remove fileExtension   ttf    gt               lt mimeMap fileExtension   ttf  mimeType  application octet-stream    gt               lt remove fileExtension   svg    gt               lt mimeMap fileExtension   svg  mimeType  image svg xml    gt               lt remove fileExtension   woff    gt               lt mimeMap fileExtension   woff  mimeType  application font-woff    gt               lt remove fileExtension   woff2    gt               lt mimeMap fileExtension   woff2  mimeType  application font-woff2    gt               lt remove fileExtension   json    gt               lt mimeMap fileExtension   json  mimeType  application json    gt           lt  staticContent gt           lt rewrite gt               lt rules gt                   lt rule name  AngularJS  stopProcessing  true  gt                       lt 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         gt                       lt conditions logicalGrouping  MatchAll  gt                       lt  conditions gt                       lt action type  Rewrite  url      appendQueryString  true    gt                   lt  rule gt               lt  rules gt           lt  rewrite gt       lt  system webServer gt   lt  configuration gt

User · Answer

Just state format at  font-face as following    x000D   x000D   font-face   x000D    font-family   Some Family   x000D    src  url   fonts fontname ttf   format  ttf       and this for every font    x000D    x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

I ve had this problem twice already with icon fonts generated by icomoon  In both cases one of the icons was using the  quot space character quot   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

User · Answer

just in case this is relevant for someone  I got the exact same error using ASP NET and C  in Visual studio  When I started the app from within the visual studio it worked  but I got this issue  In the meantime  it turned out  that the path to my project contained the character      c  C  testapplication   This seems to confuse IIS Express  maybe also IIS  and causes this issue  I guess     is a reserved character somewhere in ASP NET or below  Changing the path helped and now it works as expected   Regards Christof

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D   lt system webServer gt  x000D    lt staticContent gt  x000D         lt remove fileExtension   eot    gt  x000D         lt mimeMap fileExtension   eot  mimeType  application vnd ms-fontobject    gt  x000D         lt remove fileExtension   ttf    gt  x000D         lt mimeMap fileExtension   ttf  mimeType  application octet-stream    gt  x000D         lt remove fileExtension   svg    gt  x000D         lt mimeMap fileExtension   svg  mimeType  image svg xml    gt  x000D         lt remove fileExtension   woff    gt  x000D         lt mimeMap fileExtension   woff  mimeType  application font-woff    gt  x000D       lt  staticContent gt  x000D   lt  system webServer gt  x000D   x000D   x000D

User · Answer

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

User · Answer

If your are using Chrome  try adding an opentype  OTF  version of your font as shown below                url  icomoon otf   format  opentype              Cheers

User · Answer

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

User · Answer

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  quot error quot        gt           error   file does not exist  etc      res setHeader  quot content-type quot    quot text plain quot        res statusCode   404      res end  quot ouuups  problem    quot       stream on  quot open quot        gt           good     res setHeader  quot content-type quot   mime              mime is your font   file mime-type     res statusCode   200      stream pipe res

User · Answer

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

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

Examples related to css

Examples related to asset-pipeline

Examples related to ruby-on-rails-4.1

Examples related to custom-font