Failed to decode downloaded font

Question

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.

Solution 1

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.

Solution 2

I experienced a similar issue in Visual Studio, which was being caused by an incorrect url() path to the font in question.

I stopped getting this error after changing (for instance):

@@font-face{
    font-family: "Example Font";
    src: url("/Fonts/ExampleFont.eot?#iefix");

to this:

@@font-face{
    font-family: "Example Font";
    src: url("../fonts/ExampleFont.eot?#iefix");

Solution 3

Changing format('woff') to format('font-woff') solves the problem.

Just a little change compared to Germano Plebani's answer

 @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('font-woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Please check if your browser sources can open it and what is the type

Solution 4

I had to add type="text/css" to my link-tag. I changed it from:

<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

to:

<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css">

After I changed it the error disappeared.

Solution 5

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

View more solutions

Comments

[Álvaro González]

Why the trailing slash in the URL? Are you trying to load all the files from a directory or it's actually a redirection to a single font file?

[Luís Ferreira]

@ÁlvaroG.Vicario Hi, thank you for your time. I edited the question to make it clearer.

[Luís Ferreira]

I edited my question to make it clearer. I am not sure if it changes anything of what you posted. Sorry for the mess and thank you for your time.

[Germano Plebani]

You have to use necessarily @font face? I know Lato is available on google fonts. Anyhow you can try this: font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url('../font/file for regular font.wof') format('wof'); This code for every type of font, regular, bold etc...

[Luís Ferreira]

I ended up using the google fonts option and it works well. Thanks. I accepted your answer.

[Krii]

This question is labeled 'failed to decode downloaded font'. The answer is specific a situation, and does not actually state what the error means.

[duyn9uyen]

Yes! I removed the format('woff2') and it removed the warnings. Thanks.

[Arthur]

the font-woff format is wrong, it should read "woff". And with this, Chrome consider the woff font as unknown format and skip to the next best format (probably ttf of woff2 here)

[OrderAndChaos]

Is there another term for this? I can't seem to find that option in either of my FTP clients.

[Robert Gowland]

I only know the terms BIN and ASCII from *nix command line browsers. I would assume many modern FTP clients would know how which files are binary and which aren't, so maybe it's not your issue. If you want to test whether your FTP client is sending in binary mode, use FTP to move binary data, like an .jpg, then try to view it. If it was sent in ASCII mode, it won't display. (See jscape.com/blog/…)

[OrderAndChaos]

Ah I see, thanks for the explanation. All the images I'm uploading are fine, I eventually found the binary mode in FileZilla, it didn't help me unfortunately. I couldn't find an option in PHP Storm for binary, but as I said images are fine, so I'm guessing this isn't the issue I'm having.

[Maulik]

I was also getting same error with google fonts, when I did hard reload the issue got solved automatically!

[Far]

thank you so much, with this solution I could solve the problem with other formats (ttf, woff2, ...) as well.

[Baim Wrong]

how to do this ?

[Ciprian Tomoiagă]

-1, sorry. one should not use drop https support for this! It makes your site insecure. @MaulikGangani 's observation works ! Consider integrating it into your answer

[André C. Andersen]

Unfortunately this answer is wrong. It might be unclear what @Arthur is saying, but if you change the font format name the browser will literally ignore the font, because it doesn't get registered as a font. In chrome's inspection tool (F12), go to the Application tab then down to Frames > Top > Fonts. Try to use this solution, and you'll see the fonts be removed. I seldom use downvotes on SO, but in this case the answer actually makes readers worse off, because they might think they have solved the problem, but have only camouflaged it.

[lewis4u]

Thank you, it works. So if anyone is loading the fonts from google just add that type="text/css" and the warning message in browser console is gone after 'hard' refresh

[Shereef Marzouk]

for me ./ or ../ didn't work but removing the / altogether worked went from /assets... to assets... Thank you so much!

[Thanh-Quy Nguyen]

That solved my issue importing woff files in a Nextjs project! Thanks a lot!

[JohnK]

As @AndréC.Andersen says THIS ANSWER ONLY CAMOUFLAGES THE PROBLEM AND DOESN'T FIX IT.

[chojnicki]

answer completely is WRONG, should be removed

[Carson]

My test results are also as mentioned above, the reason why the warning does not appear is not solved but was skipped, that is, you can type randomly do not know the format(for example format('wrong12345')), but also can create the illusion that seems to pass

[Joseph Kreifels II]

It's important to understand what each means. A ../ means the parent directory, while a single slash / on its own represents the root directory. You need to adjust the URL so it points to the directory containing your font file. Sometimes you might use something like ../../