CODEWITHSUNDEEP
webpackfonts
luckyStar
luckyStar

Reputation: 101

WebPack custom font loading resulted OTS PARSING ERROR: invalid sfntVersion:

I am using webpacker and developing simple static html website but custom font loading causes OTS PARSING ERROR: invalid sfntVersion

This is the style I set in font.css file

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

This is the error I got. Failed to decode downloaded font: http://localhost:8080/c5d65aebe9531b4bbcb6.ttf?-fvbane localhost/:1 OTS parsing error: invalid sfntVersion: 1702391919

When I type url http://localhost:8080/c5d65aebe9531b4bbcb6.ttf?-fvbane directly, it downloads font in browser. So I believe file is pointed correctly.

But not sure what causes this issue.

Weird thing is it works well in safari browser.

Just in chrome and firefox.

Any help and suggestions should be appreciated!

Thanks in advance!

Upvotes: 8

Views: 14510

Answers (2)

kadet
kadet

Reputation: 569

This issue occurs when trying to use custom loaders for fonts with webpack 5^. Webpack has introduced a new asset module feature that aims to replace custom loaders for fonts, images, etc.

You can solve issue issue by using

rules: [
  {
    test: /\.woff2?$/i,
    type: 'asset/resource',
    dependency: { not: ['url'] },
  }, 
]

instead of

rules: [
  {
    test: /\.woff2?$/i,
    loader: "file-loader",
    options: {
      name(file) {
        return "[hash].[ext]";
      },
    },
  }, 
]

Upvotes: 31

Remix Protocol
Remix Protocol

Reputation: 97

Are you using the loaders module? It has been deprecated, I had the same issue when using the file-loader module. Migrated to use Asset Modules and that fixed the same issue.

Upvotes: 6

Related Questions