Failed to decode downloaded font как исправить

This is an error I am getting in Chrome and unfortunately searching for it hasn’t given me much results. The font itself is appearing correctly. However I still get this error/warning. More specifically, this is the full warning:

«Failed to decode downloaded font:
http://localhost:8000/app/fonts/Lato/»

My CSS are these:

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

I just do not understand. The font is applied correctly, but the warning is always there. Trying to use Sans-Serif makes the font revert to the normal browser font, so that may be it, but I am not sure, and even after searching I have found nothing. Thanks!

EDIT

There are various font files, all from the same family. I am trying to load them all. The font files are .ttf. I am loading them from a local folder, and there are various font-files, like Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttf etc.

Make sure your server is sending the font files with the right mime/type.

I recently have the same problem using nginx because some font mime types are missing from its vanilla /etc/nginx/mime.types file.

I fixed the issue adding the missing mime types in the location where I needed them like this:

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

You can also check this out for extending the mime.types in nginx:
extending default nginx mime.types file

I just had the same issue and solved it by changing

src: url("Roboto-Medium-webfont.eot?#iefix")

to

src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')

answered Jan 27, 2016 at 15:42

answered Feb 21, 2016 at 5:39

answered Aug 10, 2016 at 16:34

AWS Amplify specific Failed to decode downloaded font issue as above — but adding woff2 to the default Target address /index.html rule in App setting / Rewrites and redirects resolved any woff2 errors 👍

Before

</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

After

</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>

answered Dec 8, 2021 at 16:53

I also had same problem but i have solved by adding ‘Content-Type’ : ‘application/x-font-ttf’ in response header for all .ttf files

In my case, this was caused by creating a SVN patch file that encompassed the addition of the font files. Like so:

1. Add font files from local file system to subversioned trunk
2. Trunk works as expected
3. Create SVN patch of trunk changes, to include addition of font files
4. Apply patch to another branch
5. Font files are added to subversioned branch (and can be committed), but are corrupted, yielding error in OP.

The solution was to upload the font files directly into the branch from my local file system. I assume this happened because SVN patch files must convert everything to ASCII format, and don’t necessarily retain binary for font files. But that’s only a guess.

answered Jun 25, 2017 at 18:32

answered Aug 27, 2019 at 22:24

answered Dec 4, 2018 at 21:27

answered Jan 11, 2016 at 3:46

I use .Net Framework 4.5/IIS 7

To fix it I put file Web.config in folder with font file.

Content of Web.config:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>

answered Nov 19, 2018 at 11:10

answered Jul 20, 2019 at 7:25

My case looked similar but the font was corrupted (and so impossible to decode). It was caused by configuration in maven. Adding nonFilteredFileExtension for font extensions within maven-resources-plugin helped me:

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>

answered Apr 15, 2020 at 20:56

Google also fails…

Yesterday the same issue was caused by something on Google’s side, but only on Win7 and some Win10 computers.

https://github.com/google/material-design-icons/issues/1220

Anyway, it was promptly resolved in less than 24 hours.

I suggest always to backup things we depend on from CDN’s, like these fonts.

answered Sep 15, 2021 at 20:32

This is an error I am getting in Chrome and unfortunately searching for it hasn’t given me much results. The font itself is appearing correctly. However I still get this error/warning. More specifically, this is the full warning:

«Failed to decode downloaded font:
http://localhost:8000/app/fonts/Lato/»

My CSS are these:

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

I just do not understand. The font is applied correctly, but the warning is always there. Trying to use Sans-Serif makes the font revert to the normal browser font, so that may be it, but I am not sure, and even after searching I have found nothing. Thanks!

EDIT

There are various font files, all from the same family. I am trying to load them all. The font files are .ttf. I am loading them from a local folder, and there are various font-files, like Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttf etc.

Make sure your server is sending the font files with the right mime/type.

I recently have the same problem using nginx because some font mime types are missing from its vanilla /etc/nginx/mime.types file.

I fixed the issue adding the missing mime types in the location where I needed them like this:

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

You can also check this out for extending the mime.types in nginx:
extending default nginx mime.types file

I just had the same issue and solved it by changing

src: url("Roboto-Medium-webfont.eot?#iefix")

to

src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')

answered Jan 27, 2016 at 15:42

answered Feb 21, 2016 at 5:39

answered Aug 10, 2016 at 16:34

AWS Amplify specific Failed to decode downloaded font issue as above — but adding woff2 to the default Target address /index.html rule in App setting / Rewrites and redirects resolved any woff2 errors 👍

Before

</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

After

</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>

answered Dec 8, 2021 at 16:53

I also had same problem but i have solved by adding ‘Content-Type’ : ‘application/x-font-ttf’ in response header for all .ttf files

In my case, this was caused by creating a SVN patch file that encompassed the addition of the font files. Like so:

1. Add font files from local file system to subversioned trunk
2. Trunk works as expected
3. Create SVN patch of trunk changes, to include addition of font files
4. Apply patch to another branch
5. Font files are added to subversioned branch (and can be committed), but are corrupted, yielding error in OP.

The solution was to upload the font files directly into the branch from my local file system. I assume this happened because SVN patch files must convert everything to ASCII format, and don’t necessarily retain binary for font files. But that’s only a guess.

answered Jun 25, 2017 at 18:32

answered Aug 27, 2019 at 22:24

answered Dec 4, 2018 at 21:27

answered Jan 11, 2016 at 3:46

I use .Net Framework 4.5/IIS 7

To fix it I put file Web.config in folder with font file.

Content of Web.config:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>

answered Nov 19, 2018 at 11:10

answered Jul 20, 2019 at 7:25

My case looked similar but the font was corrupted (and so impossible to decode). It was caused by configuration in maven. Adding nonFilteredFileExtension for font extensions within maven-resources-plugin helped me:

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>

answered Apr 15, 2020 at 20:56

Google also fails…

Yesterday the same issue was caused by something on Google’s side, but only on Win7 and some Win10 computers.

https://github.com/google/material-design-icons/issues/1220

Anyway, it was promptly resolved in less than 24 hours.

I suggest always to backup things we depend on from CDN’s, like these fonts.

answered Sep 15, 2021 at 20:32

This is an error I am getting in Chrome and unfortunately searching for it hasn’t given me much results. The font itself is appearing correctly. However I still get this error/warning. More specifically, this is the full warning:

«Failed to decode downloaded font:
http://localhost:8000/app/fonts/Lato/»

My CSS are these:

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

I just do not understand. The font is applied correctly, but the warning is always there. Trying to use Sans-Serif makes the font revert to the normal browser font, so that may be it, but I am not sure, and even after searching I have found nothing. Thanks!

EDIT

There are various font files, all from the same family. I am trying to load them all. The font files are .ttf. I am loading them from a local folder, and there are various font-files, like Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttf etc.

Make sure your server is sending the font files with the right mime/type.

I recently have the same problem using nginx because some font mime types are missing from its vanilla /etc/nginx/mime.types file.

I fixed the issue adding the missing mime types in the location where I needed them like this:

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

You can also check this out for extending the mime.types in nginx:
extending default nginx mime.types file

I just had the same issue and solved it by changing

src: url("Roboto-Medium-webfont.eot?#iefix")

to

src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')

answered Jan 27, 2016 at 15:42

answered Feb 21, 2016 at 5:39

answered Aug 10, 2016 at 16:34

AWS Amplify specific Failed to decode downloaded font issue as above — but adding woff2 to the default Target address /index.html rule in App setting / Rewrites and redirects resolved any woff2 errors 👍

Before

</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

After

</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>

answered Dec 8, 2021 at 16:53

I also had same problem but i have solved by adding ‘Content-Type’ : ‘application/x-font-ttf’ in response header for all .ttf files

In my case, this was caused by creating a SVN patch file that encompassed the addition of the font files. Like so:

1. Add font files from local file system to subversioned trunk
2. Trunk works as expected
3. Create SVN patch of trunk changes, to include addition of font files
4. Apply patch to another branch
5. Font files are added to subversioned branch (and can be committed), but are corrupted, yielding error in OP.

The solution was to upload the font files directly into the branch from my local file system. I assume this happened because SVN patch files must convert everything to ASCII format, and don’t necessarily retain binary for font files. But that’s only a guess.

answered Jun 25, 2017 at 18:32

answered Aug 27, 2019 at 22:24

answered Dec 4, 2018 at 21:27

answered Jan 11, 2016 at 3:46

I use .Net Framework 4.5/IIS 7

To fix it I put file Web.config in folder with font file.

Content of Web.config:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>

answered Nov 19, 2018 at 11:10

answered Jul 20, 2019 at 7:25

My case looked similar but the font was corrupted (and so impossible to decode). It was caused by configuration in maven. Adding nonFilteredFileExtension for font extensions within maven-resources-plugin helped me:

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>

answered Apr 15, 2020 at 20:56

Google also fails…

Yesterday the same issue was caused by something on Google’s side, but only on Win7 and some Win10 computers.

https://github.com/google/material-design-icons/issues/1220

Anyway, it was promptly resolved in less than 24 hours.

I suggest always to backup things we depend on from CDN’s, like these fonts.

answered Sep 15, 2021 at 20:32

Have you tried adding $s to the end of test? Like test: /.eot$/, on all of them. woff might get hit twice

But the url is .woff2?v=4.4.0 and .woff2?xxxx

Thank you. It works when the test is /.woff2(?S*)?$/.

Please verify on awesome-fonts .css file if the url path for fonts are ok. It works for me.

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.

Hello @isramv, on your snippet, I think there is a typo on minetype, shouldn’t be mimetype ?

I’m having this same issue, and none of the above seem to work for me.

Not yet, unfortunately :/

@mbifulco if you find anything I’d love to see that as well .. 😞

Thanks, @isramv !!! This worked great for me.

Didn’t work neither for woff/woff2 files, but now it’s ok. What I did:

{
  test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,
  loader: 'url',
  query: {
    limit: 10000,
    mimetype: "application/font-woff",
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
},
{
  test: /.(eot|ttf|otf)(?.*)?$/,
  loader: 'url',
  query: {
    limit: 10000,
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
},

I also re-converted my font files using online convertors, and now it works like a charm.

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.

Recently I also had the same problem, the following webpack config script snipped is solved the issue:

    {
      test: /.svg(?v=[0-9].[0-9].[0-9])?$/,
      loader: 'url?limit=65000&mimetype=image/svg+xml&name=/[name].[ext]'
    },
    {
      test: /.woff(?v=[0-9].[0-9].[0-9])?$/,
      loader: 'url?limit=65000&mimetype=application/font-woff&name=/[name].[ext]'
    },
    {
      test: /.woff2(?v=[0-9].[0-9].[0-9])?$/,
      loader: 'url?limit=65000&mimetype=application/font-woff2&name=/[name].[ext]'
    },
    {
      test: /.[ot]tf(?v=[0-9].[0-9].[0-9])?$/,
      loader: 'url?limit=65000&mimetype=application/octet-stream&name=/[name].[ext]'
    },
    {
      test: /.eot(?v=[0-9].[0-9].[0-9])?$/,
      loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=/[name].[ext]'
    }

The most important thing from the config above is name query parameter for url loader, with my config fonts will be rendered as /, you may prefixed this with, for example, fonts: &name=/fonts/[name].[ext]

@vchyzhevskyi thanks!! It worked after few hours searching a solution

@vchyzhevskyi this way you’ll encode your fonts in base64 into your css file no ? Could be better to have font files to light the weight of your app..

it worked for me after I specify the format like this:

@font-face {
    font-family: "shop-icons";
    src: url(node_modules/mypkg/fonts/shop-icons.svg) format("svg"),
        url(node_modules/mypkg/fonts/shop-icons.ttf) format("truetype"),
        url(node_modules/mypkg/fonts/shop-icons.eot),
        url(node_modules/mypkg/fonts/fonts/shop-icons.woff) format("woff");
}

Initially I didn’t have format and my style looked like:

@font-face {
    font-family: "shop-icons";
    src: url(node_modules/mypkg/fonts/shop-icons.svg),
        url(node_modules/mypkg/fonts/shop-icons.ttf),
        url(node_modules/mypkg/fonts/shop-icons.eot),
        url(node_modules/mypkg/fonts/fonts/shop-icons.woff);
}

Has Similar issue, This works for me:
{ test: /.(eot|woff|ttf|svg)$/, loaders: ["file?name=[path][name].[ext]?[hash]"] }, { test: /.woff2(?S*)?$/, loaders: ["file?name=[path][name].[ext]?[hash]"] }

none of these solutions are working for me.

still getting the error

@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])?$/,
        }

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.

This works for me thinks

@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])?$/,
        }

This solved the issue, thanks!!

{ 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» }

Strangely, this worked for me. If anyone out there is stuck on this with no hope, give this bizarre solution a try