Rendering Weird

[anthonycalixto]

I am using this font hosted on Google web fonts and at first it was rendering fine but now it looks off. Something about it looks weird. It looks pixelated and it's annoying. I noticed it's looking weird on another site that's using the same font (screenshot below). What's the problem? There's nothing wrong with the CSS on the site I'm working on.

On the first screenshot, I am using the font on the header (with the orange background) and that's at a weight of 400. Something about it looks odd, it looked much better a few days ago.

[pauldhunt]

Have you tested the rendering on Mac or other versions of Windows? Are you having the same issues? Does clearing the browser cache do anything to resolve this issue?

[anthonycalixto]

No. I do not have a Mac. I'm running on Windows 7 and all computers I have
here at home are running on Windows 7. I was on this same laptop a few days
ago and the font was rendering fine. It looked smooth and perfect but out
of nowhere, it started rendering weird and pixelated.

[anthonycalixto]

Also when I set the weight to 300 it looks even worse. Some parts of the
font are thin, some are a little thicker.

[anthonycalixto]

Should I try to host it manually? On Dropbox or something and see if I have
the same issue?

[miguelsousa]

Try clearing the browser's cache and see if that helps.

[GBeauregard]

It works for me on Linux (Gentoo) using Chromium 24.0.1312.45 (173848) with freetype 2 compiled with the infinality patch set as the font rendering engine.
Presumably this is an issue with the op's setup.

[anthonycalixto]

It was working fine before though... on Windows 7 (Google Chrome) I didn't
change no settings or anything so I don't see how the rendering could have
changed out of nowhere... I cleared the cache last night and restarted the
laptop. Problem still persists.

[anthonycalixto]

Hmm... it looks fine on Internet Explorer but it's still rendering weird on
both Firefox and Google Chrome. What should I do? Does it have to do with
anti-alias and things like that? Do I have to add a code to the CSS?

[pauldhunt]

This is the rendering I get on my Win7 setup with Chrome:

[anthonycalixto]

@pauldhunt That's how it should be looking but I am seeing it different (screenshot). It looks more pixelated. @wellsriley Yes I am using Google web fonts for this particular font, should I host it manually and see if the problem persists? @pauldhunt If that's how you see it on Windows 7 on Chrome, what should I do to fix this? Because I'm using the same and it's still acting up...

[GBeauregard]

@pauldhunt It burns! (I can't stand Windows font rendering 😒)

[anthonycalixto]

Thanks Wells! Will do and I will update this post if it fixes the problem
or if the problem still persists!

[pauldhunt]

Anthony,

I'm not sure what to tell you to try next, but it seems clear that this is not a font issue. I'm doubtful this is a Google Web Fonts issue as I am getting the proper rendering on my end. It seems you must have some local setting that is causing this renering issue for you. You might try making sure that you have ClearType rendering enabled, otherwise it is likely that you can get ugly pixelated rendering like this on Windows. Besides that, I'm not sure what might be causing this issue.

P.S. Please do not reply with additional text besides your own when replying by email, thanks.

[anthonycalixto]

@pauldhunt This problem only seems to be with the laptop I am on. It was working perfectly before so I'm going to check the settings and see if I changed anything. I checked it on another computer running the same operating system and the font looked normal. Thanks for the help Paul.

[miguelsousa]

@anthonycalixto are all your machines running the same version of Chrome, and do they have all the same Windows updates installed?

[anthonycalixto]

@miguelsousa All machines are running the same version. But I tested Firefox on my laptop and it was rendering weird, then tested Firefox on my dad's laptop and it looked fine to me. It was rendering fine on my laptop a few days ago. I didn't change any settings so I don't know what this could be. But I have found a solution to the problem.

[anthonycalixto]

@pauldhunt I am now hosting the font files on my website from Font Squirrel and the font is looking normal on Google Chrome... I'm not sure why this problem was happening but it's back to normal none the less.

[njx]

FWIW, it looks like the order of declarations in the @font-face could affect this: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/ -- it could be that different hosting services put them in different orders.

Also FWIW, I see the same thing on (e.g.) http://twitter.github.com/bootstrap -- the rendering of the large "Bootstrap" text is much nicer in IE than in Chrome on Windows.

[anthonycalixto]

The rendering was acting up even before I used font face. I found a fix now
though. I'm using the font hosted on font squirrel.

[davelinke]

I was experiencing easing failures on Windows with the font. The EOT file i was using was a converted TTF file. I used the EOT files provided by Adobe at Github and now it looks all right. Although my case was not a failure of the adobe files themselves, i just wanted to post it here in case someone is experiencing this by not using the files available on Github.