Webpack: "OTS parsing error: invalid version tag" while loading *.eot font

Question

I am using webpack and try to load a generated icon font, but keep getting the "OTS parsing error: invalid version tag" error.

This is my webpack config to load fonts and images:

            {
                test: /\.svg$/,
                loader: 'svg-url-loader',
                options: {}
            },
            {
                test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=65000&mimetype=application/font-woff&name=/[name].[ext]'
            },
            {
                test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=65000&mimetype=application/font-woff2&name=/[name].[ext]'
            },
            {
                test: /\.[ot]tf(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=65000&mimetype=application/octet-stream&name=/[name].[ext]'
            },
            {
                test: /\.eot(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
                loader: 'url-loader?limit=65000&mimetype=application/vnd.ms-fontobject&name=/[name].[ext]'
            },
            {
                test: /\.(png|jpe?g|gif|)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            } 

This is inside my my-icons.css font declaration:

@font-face {
  font-family: 'my-font';
  src:  url('fonts/my-font.eot?6zubex');
  src:  url('fonts/my-font.eot?6zubex#iefix') format('embedded-opentype'),
    url('fonts/my-font.ttf?6zubex') format('truetype'),
    url('fonts/my-font.woff?6zubex') format('woff'),
    url('fonts/my-font.svg?6zubex#my-font') format('svg');
  font-weight: normal;
  font-style: normal;
}

I used different configurations suggested on similar issues about that topic but I can't get it to work.

Answer 1

The solution here is pretty simple, actually: it's ~2017~ 2022, and Microsoft no longer supports eot, the svg format no longer exists, and ttf/otf are system fonts, not webfonts, don't use them when you also use WOFF (WOFF literally wraps them byte for byte, but with table-level compression). "Which format should I use for modern sites on browsers that are still supported by their manufacturers?" "You only need WOFF2" (with WOFF for ancient browser fallback).

The second part of the solution is "for the love of your users do not put your static assets inside of your JS app bundle", because the browser can't cache them that way, and everytime you update your font or your code, your users now have to redownload the entire bundle, wasting tons of your bandwidth, and their time. Keep those files hosted like normal static asset, using a normal static server (AWS, github pages, take your pick). There shouldn't really be a need to make webpack aware of the fact that your html file is going to be loading a .css file that is going to be loading a webfont. Your style code should simply be able to assume "that works".