209

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.

3
  • 2
    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? Commented May 25, 2015 at 16:29
  • @ÁlvaroG.Vicario Hi, thank you for your time. I edited the question to make it clearer. Commented May 25, 2015 at 16:58
  • I have the same problem with a .FON file Commented Jul 20, 2022 at 18:05

23 Answers 23

147

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.

6
  • 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. Commented May 25, 2015 at 17:00
  • 1
    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... Commented May 25, 2015 at 22:12
  • 1
    I ended up using the google fonts option and it works well. Thanks. I accepted your answer. Commented May 26, 2015 at 8:30
  • 14
    This question is labeled 'failed to decode downloaded font'. The answer is specific a situation, and does not actually state what the error means.
    – Krii
    Commented Feb 1, 2016 at 15:49
  • I'm using a .FON file Commented Jul 20, 2022 at 18:02
30

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");
2
  • 1
    for me ./ or ../ didn't work but removing the / altogether worked went from /assets... to assets... Thank you so much! Commented May 21, 2020 at 3:39
  • 1
    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 ../../ Commented May 25, 2022 at 12:25
16

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

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

to:

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

After I changed it the error disappeared.

1
  • 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
    – lewis4u
    Commented Jan 9, 2020 at 9:16
13

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

7

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')
1
  • 1
    Fortunately we don't have to bother about Internet Explorers quirks anymore. So we can safely remove all the .eot bloat completely. Commented Mar 7 at 2:40
6

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

7
  • 14
    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)
    – Arthur
    Commented May 23, 2017 at 8:01
  • 1
    thank you so much, with this solution I could solve the problem with other formats (ttf, woff2, ...) as well.
    – Far
    Commented Jun 10, 2018 at 6:26
  • 21
    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. Commented Dec 4, 2018 at 21:38
  • 11
    As @AndréC.Andersen says THIS ANSWER ONLY CAMOUFLAGES THE PROBLEM AND DOESN'T FIX IT.
    – JohnK
    Commented Jun 4, 2020 at 19:24
  • 4
    answer completely is WRONG, should be removed
    – chojnicki
    Commented Jun 22, 2020 at 21:21
6

My problem was occurring in browsers different than chrome. Pay attention to the coma between URL and format, this is how everything went back to normal for all the browsers. Honestly, it works without this "format" too but I decided to leave it be.

@font-face {
  font-family: "Roboto";
  src: url("~path_to_font/roboto.ttf"), format("truetype");
}
1
  • 1
    Be careful: the correct format for .ttf is truetype. So it should be src: url("path_to_font/roboto.ttf"), format("truetype") Commented Oct 29, 2022 at 18:10
5

Sometimes this problem happens when you upload/download the fonts using the wrong FTP method. Fonts must be FTP-ed using binary method, not ASCII. (Depending on your mood, it may feel counterintuitive, lol). If you ftp the font files using ASCII method, you can get this error message. If you ftp your files with an 'auto' method, and you get this error message, try ftp forcing the binary method.

5

For me, this error was occuring when I referenced a google font using https. When I switched to http, the error went away. (and yes, I tried it multiple times to confirm that was the cause)

So I changed:

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

To:

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);
2
  • 3
    I was also getting same error with google fonts, when I did hard reload the issue got solved automatically!
    – Maulik
    Commented Sep 20, 2017 at 11:31
  • 5
    -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 Commented Oct 20, 2018 at 18:31
3

I was having the same issue with font awesome v4.4 and I fixed it by removing the woff2 format. I was getting a warning in Chrome only.

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
1
  • 1
    Yes! I removed the format('woff2') and it removed the warnings. Thanks.
    – duyn9uyen
    Commented Nov 4, 2016 at 16:26
3

In my case it was caused with an incorrect path file, in .htaccess. please check correctness of your file path.

2

For me, the mistake was forgetting to put FTP into binary mode before uploading the font files.

Edit

You can test for this by uploading other types of binary data like images. If they also fail to display, then this may be your issue.

3
  • Is there another term for this? I can't seem to find that option in either of my FTP clients. Commented Sep 12, 2017 at 8:40
  • 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/…) Commented Sep 13, 2017 at 13:04
  • 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. Commented Sep 16, 2017 at 9:28
2

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)$)([^.]+$)/>
1

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

1
  • 1
    how to do this ?
    – Baim Wrong
    Commented Jul 9, 2018 at 10:06
1

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.

1

In my case -- using React with Gatsby -- the issue was solved with double-checking all of my paths. I was using React/Gatsby with Sass and the Gatsby source files were looking for the fonts in a different place than the compiled files. Once I duplicated the files into each path this problem was gone.

1

In my case when downloading a template the font files were just empty files. Probably an issue with the download. Chrome gave this generic error about it. I thought at first the solution of changing from woff to font-woff solved it, but it only made Chrome ignore the fonts. My solution was finding the fonts one by one and downloading/replacing them.

1

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>
0

If you are using express you need to allow serving of static content by adding something like: var server = express(); server.use(express.static('./public')); // where public is the app root folder, with the fonts contained therein, at any level, i.e. public/fonts or public/dist/fonts... // If you are using connect, google for a similar configuration.

0

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>
0

If it is on the server (not in localhost), then try to upload the fonts manually, because sometimes the FTP client (for example, FileZilla) corrupts the files and it can cause the problem. For me, I uploaded manually using Cpanel interface.

0

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.

-2

for me it was a problem with lfs files that were not downloaded

git lfs fetch --all

fixed the problem.

see https://github.com/git-lfs/git-lfs/issues/325

Not the answer you're looking for? Browse other questions tagged or ask your own question.