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

But the url is .woff2?v=4.4.0 and .woff2?xxxx

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

Please verify on awesome-fonts .css file if the url path for fonts are ok. It works for me.

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.

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

I'm having this same issue, and none of the above seem to work for me.

@mbifulco any luck?

Not yet, unfortunately :/

@mbifulco if you find anything I'd love to see that as well .. 😞

Thanks, @isramv !!! This worked great for me.

Have the same

Didn't work neither for woff/woff2 files, but now it's ok. What I did:

{
  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  loader: 'url',
  query: {
    limit: 10000,
    mimetype: "application/font-woff",
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
},
{
  test: /\.(eot|ttf|otf)(\?.*)?$/,
  loader: 'url',
  query: {
    limit: 10000,
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
},

I also re-converted my font files using online convertors, and now it works like a charm.

@LaCroute What is "utils" in your example?

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.

@designbyadrian sorry I didn't see utils was not defined...

I adapted my config from this template. So utils is the require of this file > https://github.com/vuejs-templates/webpack/blob/master/template/build/utils.js

Hi @isramv, thank you !

Recently I also had the same problem, the following webpack config script snipped is solved the issue:

    {
      test: /\.svg(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url?limit=65000&mimetype=image/svg+xml&name=/[name].[ext]'
    },
    {
      test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url?limit=65000&mimetype=application/font-woff&name=/[name].[ext]'
    },
    {
      test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url?limit=65000&mimetype=application/font-woff2&name=/[name].[ext]'
    },
    {
      test: /\.[ot]tf(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url?limit=65000&mimetype=application/octet-stream&name=/[name].[ext]'
    },
    {
      test: /\.eot(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=/[name].[ext]'
    }

The most important thing from the config above is name query parameter for url loader, with my config fonts will be rendered as /, you may prefixed this with, for example, fonts: &name=/fonts/[name].[ext]

@vchyzhevskyi thanks!! It worked after few hours searching a solution

@vchyzhevskyi this way you'll encode your fonts in base64 into your css file no ? Could be better to have font files to light the weight of your app..

it worked for me after I specify the format like this:

@font-face {
    font-family: "shop-icons";
    src: url(node_modules/mypkg/fonts/shop-icons.svg) format("svg"),
        url(node_modules/mypkg/fonts/shop-icons.ttf) format("truetype"),
        url(node_modules/mypkg/fonts/shop-icons.eot),
        url(node_modules/mypkg/fonts/fonts/shop-icons.woff) format("woff");
}

Initially I didn't have format and my style looked like:

@font-face {
    font-family: "shop-icons";
    src: url(node_modules/mypkg/fonts/shop-icons.svg),
        url(node_modules/mypkg/fonts/shop-icons.ttf),
        url(node_modules/mypkg/fonts/shop-icons.eot),
        url(node_modules/mypkg/fonts/fonts/shop-icons.woff);
}

Has Similar issue, This works for me:
{ test: /\.(eot|woff|ttf|svg)$/, loaders: ["file?name=[path][name].[ext]?[hash]"] }, { test: /\.woff2(\?\S*)?$/, loaders: ["file?name=[path][name].[ext]?[hash]"] }

none of these solutions are working for me.

still getting the error :)

@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])?$/,
        }

@kaankucukx - ok, will try that out. thanks.

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.

This works for me thinks

@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])?$/,
        }

This solved the issue, thanks!!

{ 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" }

Strangely, this worked for me. If anyone out there is stuck on this with no hope, give this bizarre solution a try ;)