Web fonts look choppy in Firefox only

Question

• OS: Win 7 64bit
• Browser: FF 24.0

If I go to http://www.google.com/fonts it looks awful:

And when I load one for my site locally it looks equally as bad but here is my configuration that I generated from fontsquirrel below:

    @font-face {
        font-family: 'SecretSans';
        src: url('<%=domain_url%>/fonts/secretsansextralight-webfont.eot');
        src: url('<%=domain_url%>/fonts/secretsansextralight-webfont.eot?#iefix') format('embedded-opentype'),
             url('<%=domain_url%>/fonts/secretsansextralight-webfont.svg#secretsansttextralight') format('svg'),
             url('<%=domain_url%>/fonts/secretsansextralight-webfont.woff') format('woff'),
             url('<%=domain_url%>/fonts/secretsansextralight-webfont.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    }

Because it looks just as bad on the site above and my own site I presume it's an issue with Firefox and/or Windows.

Is there a fix/configuration that will work for all users hitting my site that doesn't require them changing any settings within Firefox or Windows as that's obviously unrealistic.

EDIT1: I just went to Control Panel > Fonts > Adjust ClearType text and now it renders properly in Firefox... I can't ask users to do this though so I'm hoping there is another way

Answer 1

I know this thread is from the stoneage, but unfortunately the problem is still current. And if you google for the choppy fonts problem, it's in the top 10; so I want to add my 10 Cents of experience with it!

Ok: If you search Google for problem with fonts under Vista/Win 7/Win 8, you find two major groups of problems that are both related to ClearType in many cases. Not all! But many.

---

Group 1: Blurry Windows fonts

If we talk of "Windows fonts" we are talking of the user interface (menus and such), and the "workspace" of office apps like Word or Excel. This problem hits almost all people that do not have a 16:9 widescreen monitor that is HD capable, esp. classic office-type monitors of 19" and 1280x1024 resolution. The keyword is "Low-DPI" here.

For those who don't know: ClearType does a HORRIBLE job on these Low-DPI monitors and renders the whole interface in such a blurry way that trying to work with it causes massive eye strain and headache. Really folks, it gives you eye cancer! (and no, you can not recreate that prob' on a Full-HD monitor!)

The only way out is to disable ClearType. This helped almost everybody of group 1 - including me.

---

Group 2: Choppy font rendering in Firefox and Chrome (rarely MSIE)

In many, many cases - like in this thread - ClearType was disabled. And when re-enabled, the browsers do render fonts just fine. True for me, too!

---

Unfortunately... when I re-enable ClearType, I'm back in group 1!!!

So: EITHER I have ClearType disabled and can work with a sharp and clear Windows for hours without fatigue of my eyes - but then I have to live with choppy webfonts in FF and Chrome.

OR I re-enable ClearType to see the nice and nifty fonts the designers have chosen for their oh-so-stylish websites - and live with the headache Windows gives me due to the blurry fonts! :-(

Obviously, I'm going the first way. And if I stumble about a website where fonts look like broken, I simply toggle the usage of webfonts with just one mouse click - there's a great FF-AddOn for that.

Oh, I forgot: Why seems MSIE to render the fonts nicely?

Well, IE (at least 10 and 11 to my knowledge) always uses ClearType to render a page - no matter if disabled in the system settings or not. Of course, it then also shows the blurry fonts problem - and makes me remember why I have ClearType disabled. And will let it so!

Final thoughts: Programmers believe webfonts to be the final solution to all of their design-needs, thinking, they have everything under control by testing their stuff on a couple of default systems. In fact, webfonts just made a well-known problem freak out of any control - because there is no such thing like a default user!

Think about it.