CODEWITHSUNDEEP
internet-explorerfirefoxfontscross-browserfont-face
Daniel Ramirez-Escudero
Daniel Ramirez-Escudero

Reputation: 4047

@font-face font blurry effect in different browsers

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: enter image description here

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

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?

Upvotes: 0

Views: 815

Answers (1)

army
army

Reputation: 545

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!

Upvotes: 2

Related Questions