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

1
votes

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!

webpackfonts