CODEWITHSUNDEEP
firefoxfontsrender
user1965284
user1965284

Reputation: 21

Poor font rendering in Firefox vs other browsers

I'm struggling to see why a nice clean / simple font like Open Sans Light doesn't look right in Firefox, but looks fine in Chrome and Safari. I guess even Chrome and Safari have some slight differences, but for the most part they look the same in those browsers.

comparison on different browsers

http://503rephotography.com/_font/testfont.html - try and look at it in Firefox and then Chrome or Safari, and you will see what I mean...not sure what it looks like in IE and don't really care all that much to be honest... :) but the font in Firefox is kinda heavy and not quite the right shape, where it should be lighter and better looking. And it's not just this font, it's pretty much every font other than the basics like Arial or Verdana.

CSS

    h1 {
    font-size:2em;
    font-family:OpenSansLight;
    color:#000;
    }


    @font-face {
        font-family: 'OpenSansLight';
        src: url('fonts/OpenSans-Light-webfont.eot');
        src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/OpenSans-Light-webfont.woff') format('woff'),
             url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
             url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
        font-weight: normal;
        font-style: normal;

    }

HTML

    <h1 align="center">Test... Open Sans Light</h1>

I looked around for an answer and most of the issues were just with a specific font, but I don't think that's the case here, as it applies to all of the ones I've tried, and I know they can look good in Firefox from viewing other sites.

Lots of sites use these fonts and look identical across browsers, are they using something like Adobe typekit in order to do this..? For a lot of these I've got the web font kit off fontsquirrel.com and it seems to work fine other than the inconsistencies. Any input is much appreciated...thanks!

Upvotes: 1

Views: 2686

Answers (1)

anderssonma
anderssonma

Reputation: 453

All you need to do is to reset the h1 default weight, or include a bold version of the font.

h1 { font-weight: normal; }

The problem here is that h1 and other headline tags have font-weight: bold set as default. And since you've set the fonts font-weight propery to normal and there is no available bold font the browser, the browser will attempt to create a faux-bold version of your font. Which pretty much always ends up looking horrible.

Firefox seems to mess up fonts the most - on the other hand the text looks bold. Chrome and Safari doesn't alter fonts nearly as much, making them look sharper but not really bold at all. Just look at your sample - it's not very obvious that the text is bold.

A good article on the issue here: http://alistapart.com/article/say-no-to-faux-bold

Upvotes: 1

Related Questions