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.

Mike 'Pomax' Kamermans · Accepted Answer · 2022-01-21T16:55:38.623

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".

From my understanding inlining static assets isn't necessarily slower depending on the users internet and the size of the file. Also some people prefer the snappiness of a full page loading together, this is a user specific issue. — Daniel Kobe, Aug 14 '17 at 03:01
Not really, but the answer already explains why it's not, so there's no real need to repeat it as comment. Also note that a page loading snappily has nothing to do with the problems associated with *redownloading* an entire bundle when only a fraction of it has changed, due to the bundling all the static assets in. Especially when loading a page as fast as possible, snappy load experience will always win when using cache, compared to having to hit the network to redownload a file that hasn't changed since last you requested it. — Mike 'Pomax' Kamermans, Aug 14 '17 at 03:30

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

1 Answers1