Font rendering ugly in Firefox but beautiful in webkit

[galaakk]

Hey all, I’m new here and I love this site so much. I have a problem and it drives me crazy. I designed a page in HTML5 & CSS3 and it looks fine in Safari/Chrome but the text and the icons (which come from a fontface) are ugly in Firefox.

Not even sure where I should look for informations and how to clean it (obviously I would like the text as fine in Firefox as it is in Chrome).

Here is a link to a screenshot : screenshot webkit/firefox

Thank you so much, I wish someone could help me soon.

P.S. : sorry for my english as I’m only a french designer in Paris ;)

[Paulie_D]

@JeremyEnglert I thought his issue was with Mozilla…not Webkit?

[galaakk]

Hi, I found a kind of solution (that makes my head explode).

Adding

h1, h2, h3, h4, h5, h6, p { font-weight : normal;  }

gives FF on Mac the same looks as Safari/Chrome and doesn’t change a thing on these ones. So that’s cool, even if I don’t understant why I had this problem in FF in the 1st place, and why this trick is working !

Other old tricks like changing opacity to 0.99 and likes didn’t work at all.

Thanks to all.

(after some further research it seems to be a problem mainly with Font Face in FFox, it doesn’t handle some of them really well (understatement of the year))

[TheDoc]

Always set font-weight to normal when using font-face.

[Author]

Posts