webpack: [loader] Failed to decode downloaded font. OTS parsing error: invalid version tag

I removed all other config and used this:

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

I hope this helps someone else too. remember: remove other font test configurations for fonts.

@Pushplaybang have u realized wuts going on ? me either having the same erros and still cant figure it out… 😦

Edit :

I come up with this. simply removed the loader and it worked.

I have to mention, my build is with Vue Cli 3 and applying this configuration on vue.config.js

Hope this helps. 🎉

       {
          test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        }

Hello @isramv, on your snippet, I think there is a typo on minetype, shouldn’t be mimetype ?

none of these solutions are working for me.

still getting the error 😃

I’d like to share the solution to my problem that’s fairly same as yours for those who google they way out here (like me).

Given my folder structure

/ # root of web server
   css/
       file-that-import-fonts.css
   fonts/
       font-file.ext

The output css file was trying to import font files at the same folder level of it.

So it always hit 404 /css/font.x and my server rendered 404 error was mistaken as a broken font. That’s why Failed to decode downloaded font. OTS parsing error: invalid version tag.

The following snippet solved:

{
  test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
  loader: 'file-loader',
  query: {
    outputPath: 'fonts/',
    publicPath: '../fonts/' // That's the important part
  }
},

Now my font files are properly referenced within my css file.

Thank you. It works when the test is /\.woff2(\?\S*)?$/.

Have you tried adding $s to the end of test? Like test: /\.eot$/, on all of them. woff might get hit twice