Font face error: Failed to decode downloaded font invalid version tag

Question

Environment is a React Nodejs app

My CSS:

@font-face {
  font-family: 'Open Sans';
  src:
    url('/src/public/fonts/OpenSans-Regular.eot'),
    url('/src/public/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
    url('/src/public/fonts/OpenSans-Regular.woff') format('woff'),
    url('/src/public/fonts/OpenSans-Regular.woff2') format('woff2'),
    url('/src/public/fonts/OpenSans-Regular.ttf') format('truetype'),
    url('/src/public/fonts/OpenSans-Regular.svg') format('svg');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Open Sans';
  src:
    url('/src/public/fonts/OpenSans-Semibold.eot'),
    url('/src/public/fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
    url('/src/public/fonts/OpenSans-Semibold.woff') format('woff'),
    url('/src/public/fonts/OpenSans-Semibold.woff2') format('woff2'),
    url('/src/public/fonts/OpenSans-Semibold.ttf') format('truetype'),
    url('/src/public/fonts/OpenSans-Semibold.svg') format('svg');
  font-style: normal;
  font-weight: bold;
} ....

I have two different definitions for Open Sans as the font-style and font-weight depends on additional classes on elements like bold italic etc which seems to be an acceptable fomat

Usage:

.union {
  font-family: 'Open Sans';
  padding-left: 12px;

  & :global(.bold) {
    font-weight: 700;
  }

  & :global(.italic) {
    font-style: italic;
    font-weight: 400;
  }
}

Webpack config:

test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000',

I have the font files under public/fonts folder, it was working fine up until a day ago but now we are getting tons of console errors failed to decode downloaded font invalid version tag for woff and ttf files. I tried other solutions link1 and link2 but it didn't help. I can see the fonts loading just fine from the public folder under Chrome's network tab

Any idea why am still getting these errrors?

score 0 · Accepted Answer · answered Dec 01 '16 at 01:14

I could fix the error. It was a combination of a couple things.. first was the path to the font file, I was setting the path as if there was no “build” happening, Webpack was putting them under /assets after release build so I had to update my path from src/public/fonts to /fonts as after the build static files are automagically looked under assets folder + adding regex to support versioning in my webpack loader config + adding mimetype for woff files

Font face error: Failed to decode downloaded font invalid version tag

1 Answers1