Failed to Decode Downloaded Font, Ots Parsing Error: Invalid Version Tag + Rails 4

Failed to decode downloaded font and OTS parsing error: invalid version tag

When you uploaded the font to your server, did you make sure you were in Binary Mode instead of ASCII (text)? That was my issue and uploading the files again in the correct mode resolved my issue.

Create React App: Failed to decode downloaded font | OTS parsing error

Files in the src folder are not directly served by your server. These files are bundled together with the build process first, and any files that are not imported will not end up in the build.

For these types of files, you can place them in the public folder, and the will end up in the build untouched and can be served by your server.

For more info see the CRA page on the public folder

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

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

Failed to decode downloaded font. OTS parsing error. VueJs

Try to use relative path when importing fonts in url(). Without '~/fontPath'

Example

@font-face {    font-family: 'MyFont';    src: url("../assets/fonts/MyFont.woff2") format('woff2');    font-weight: normal;    font-style: normal;  }