Question

I’m using CSS like this:

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

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat, Arial, Helvetica, sans-serif;
    color: #000000;
}

The page looks correct most of the time in IE7, IE8, IE9, and latest versions of FireFox and Chrome. Every few times a page loads, some or all of the page will have areas where the spacing between each letter is off. Sometimes 2 letters are crammed together, and then the next 2 letters have lots of extra space (a few pixels, but obvious and ugly). I’m not positive but I think it is only happening in IE8, and possibly in compatibility mode and also not. It’s pretty random so hard to check quickly right now.

I have no way to open the other formats, but when I open the TTF format in Windows it says “OpenType” in the title area, but then in the details says “OpenType Layout, TrueType Outlines”. I know very little about creating fonts, I just got this from the artist and then used fontsquirrel.com to create the others.

Another devloper recommended letter-spacing but that only seems to help when things are looking good, not when it gets in this random letter spacing mode.

Edit: Added photos

Just clicking around the site sometimes the page loads looking like this (this was IE8 not in compatibility mode). Look at the word “Start” the S and t are very tight. Then the word “What” there is too much space between W and h. On the right side, the word “Awarded” also looks very different than in the next image. The date on the right side looks so bad I wouldn’t even think there would be an CSS setting that would let you do that — what would it be called? make-my-page-awful: true;

All I did was press F5 to reload the page and it looks good:

Answer 1

Changing this:

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat, Arial, Helvetica, sans-serif;
    color: #000000;
}

to this:

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat;
    color: #000000;
}

So just the font: line, seems to have fixed the issue.

I’m guessing IE8 must be doing some initial layout calculations using one of the fallback fonts, probably Arial, and then trying to adjust (in a bad way). I would have assumed that if it was the very first page load, but that isn’t when it happens. It happens at some almost random time after that. I was able to recreate everytime with these steps before I applied the fix:

1. Open main page — at this point fonts looked pretty good, maybe slightly smaller than they should be.

2. Click link on main page that just reloads same page (didn’t happen if I used F5 to refresh).

–at this point, fonts looked really bad, like my example above

1. Click same link again

–at this point fonts looked perfect

I could close and reopen the browser, or just hit F5, then repeat the above steps over and over with same results every time.

Changed the one line in the CSS, and now unable to recreate.