Failed to Decode Downloaded Font

Failed to decode downloaded font

In the css rule you have to add the extension of the file.
This example with the deepest support possible:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

EDIT:

"Failed to decode downloaded font" means the font is corrupt, or is incomplete (missing metrics, necessary tables, naming records, a million possible things).

Sometimes this problem is caused by the font itself. Google font provides the correct font you need but if font face is necessary i use Transfonter to generate all font format.

Sometimes is the FTP client that corrupt the file (not in this case because is on local pc). Be sure to transfer file in binary and not in ASCII.

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

VueJS - Bootstrap icons: Failed to decode downloaded font, invalid sfntVersion

I've found the issue. It was my public folder that did not contain the fonts with the right path. I added the fonts to the folder with the path as specified in the error and all things works now.

P/S: This might be a temporary workaround, for if there are multiple icon packs and each requires a different font path, the build folder might get overloaded with tons of fonts folder. Would any one suggest a way to manage this problem?

Webpack 5 issues with fonts getting Failed to decode & OTS parsing error

tl;dr;

  use: {
    loader: 'file-loader',

All constructions like the above have to be replaced with the type: asset/resource (the entire use block).

Here is an example of what I did to solve the exact same issue on the project I work on.

Before:

        {
          test: /\.eot(\?v=\d+.\d+.\d+)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                name: '[name].[ext]',
              },
            },
          ],
        },
        {
          test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                mimetype: 'application/font-woff',
                name: '[name].[ext]',
              },
            },
          ],
        },
        {
          test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                mimetype: 'application/octet-stream',
                name: '[name].[ext]',
              },
            },
          ],
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                mimetype: 'image/svg+xml',
                name: '[name].[ext]',
              },
            },
          ],
        },
        {
          test: /\.(jpe?g|png|gif|ico)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
              },
            },
          ],
        },

After:

        {
          test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
          type: 'asset/resource',
        },

The file-loader and url-loader have been deprecated and are conflicting with css-loader 6.x.

Consider removing the file-loader and url-loader and use the Asset Modules built into Webpack 5.

Another option might be to stick to the css-loader 5.x, but not recommended.