Posted in Uncategorized

[loader] Failed to decode downloaded font. OTS parsing error: invalid version tag

   February 23, 2021  6 Comments on [loader] Failed to decode downloaded font. OTS parsing error: invalid version tag

my config:

            { test: /\.eot/, loader: 'url-loader?limit=100000&mimetype=application/vnd.ms-fontobject' },
            { test: /\.woff2/, loader: 'url-loader?limit=100000&mimetype=application/font-woff2' },
            { test: /\.woff/, loader: 'url-loader?limit=100000&mimetype=application/font-woff' },
            { test: /\.ttf/, loader: 'url-loader?limit=100000&mimetype=application/font-ttf' }

chrome console:

Failed to decode downloaded font: data:application/font-woff2;base64,bW9kdWxlLmV4cG9ydHMgPSAiZGF0YTphcHBsaWNh…dXbXR0MlhlVWZrVDBjZUhZTHVWSFlCVFJoMU4waUtEeHE0bHd0L01NcWZUZS9IL1R1MzlYIg==
OTS parsing error: invalid version tag

Author: Fantashit

6 thoughts on “[loader] Failed to decode downloaded font. OTS parsing error: invalid version tag”

  2. I removed all other config and used this:

    { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

    I hope this helps someone else too.
    remember: remove other font test configurations for fonts.

  4. I’d like to share the solution to my problem that’s fairly same as yours for those who google they way out here (like me).

    Given my folder structure

    / # root of web server
   css/
       file-that-import-fonts.css
   fonts/
       font-file.ext

    The output css file was trying to import font files at the same folder level of it.

    So it always hit 404 /css/font.x and my server rendered 404 error was mistaken as a broken font. That’s why Failed to decode downloaded font. OTS parsing error: invalid version tag.

    The following snippet solved:

    {
  test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
  loader: 'file-loader',
  query: {
    outputPath: 'fonts/',
    publicPath: '../fonts/' // That's the important part
  }
},

    Now my font files are properly referenced within my css file.

  6. @Pushplaybang have u realized wuts going on ? me either having the same erros and still cant figure it out.. 🙁

    Edit :

    I come up with this. simply removed the loader and it worked.

    I have to mention, my build is with Vue Cli 3 and applying this configuration on vue.config.js

    Hope this helps. 🎉

           {
          test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        }

Comments are closed.