Question

I’ve used the following CSS code to load my font. This is in an external CSS stylesheet:

@font-face {
    font-family: 'light';
    src: url('../_fnt/light/gothamrnd-light.eot');
    src: url('../_fnt/light/gothamrnd-light.eot?#iefix') format('embedded-opentype'),
             url('../_fnt/light/gothamrnd-light.woff') format('woff'),
             url('../_fnt/light/gothamrnd-light.ttf') format('truetype'),
             url('../_fnt/light/gothamrnd-light.svg#../_fnt/light/gothamrnd-light') format('svg');
    font-weight: normal;
    font-style: normal;
}

Everything should be fine and be perfectly visible. I’ve just heard that a friend has used firefox 15 from a windows 7 and he got some blurry images. I’ve seen that any browser from Windows gets this problem. IE does not work at all also of course… (not the best with cross-browser…)

Blurry effect, firefox 15.0.1:

This is the font as it should look like (This has been checked from Chrome 23):

The url for the website is http://escuderodesign.com/ if you wish to test. Its my portfolio and I would really like to solve this problem at least with Firefox.

I thought @font-face was enough. Could you give me a help with this?

Answer 1

It’s a font rendering issue, if you open up the light version of Gotham Rounded, you can see that even the font browser shows it skimpy at the size of 12.

So I think you have two basic options:

1. Use the regular version of the font, which shows up fine in the browser too.
2. Use a cufon renderer.

Anyhow, the font is similarly deficient in both Firefox 16.0.2 and Chrome 22.0.1 for me, so I’d say it’s a font issue. Actually in terms of rendering IE was the best for me – not so much about layout of course.

Good luck!