treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Font rendering ugly in Firefox but beautiful in webkit

  • 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 ;)
  • @JeremyEnglert I thought his issue was with Mozilla...not Webkit?
  • 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))
  • Always set font-weight to normal when using font-face.