IE8 Font-Family Crapiness

I installed IE8 last night, had to do a manual download as it hasn’t shown up in Windows Update yet. Seems ok, took a while to get used to the slight change in tab styling. So everything’s going hunky dory until I landed on a Wikipedia page. It was being rendered with some crazy font I had installed months ago for a certain project (“1st Sortie” font for those that are interested). It looked fine in FF3, Opera9 and Chrome and it had looked ok earlier in the day using IE7.

At first I thought it was an actual font file problem. I rebooted into safe mode and deleted the font it had defaulted to. When I tested it out on the same Wikipedia page it was now using yet another of my odd looking fonts.

I then figured it might have something to do with IE8s new CSS updates. I tried enabling the “Compatibility View” option and the page looked the same so I disabled it again. After some random trial and erroring I noticed it was only certain sites that showed this behaviour. I loaded up the IE8 Developer Tools and found the line in one of Wikipedias CSS files that defined the font family. It did it like this:

font-family: serif;

Another site I noticed it on used:

font-family: sans-serif;

I turned off this node using the IE8 Developer Tools and the site refreshed using the normal font, “Microsoft Sans Serif” which I had set in the Internet Options/Fonts panel. That worked for a each visit but it’s quite alot of work to do each time. I think what’s happening is that these sites are saying to use a font-family and IE8 is using the first one it finds on the system within that family. It’s either that or it’s trying to load a font with those names which doesn’t exist on my system, then it fails and defaults to the first font on the system.

During my google quest I noticed someone said to use the Internet Options/Accessability panel. They meant it for disabling all site based CSS but I rememberd seeing the “User style sheet” option. It didn’t mean anything to me yet though. I spent a while googling until I stumbled across A Killer Collection of Global CSS Reset Styles. As soon as I stumbled on the global reset site I realised I could use the two together. I chose to use the “Condensed Universal Reset” but I modified it to set a default font family:

* {
vertical-align: baseline;
font-weight: inherit;
font-family: Arial, Courier;
font-style: inherit;
font-size: 100%;
}

I saved that to a handy location in a file I called “global-reset.css”, then in IE8 I went to Tools->Internet Options/Accessibility and enabled the User style sheet option. Then it was just a case of browing to my file and doing OK to close the series of popups. The Wikipedia page refreshed in the meantime using Arial as its default font. Now all the sites I frequent look fine again.

Programming
Comments: 7

Leave a reply

Your email address will not be published. Required fields are marked *

  • flozn
    flozn

    wow, thanks a lot for posting this! i almost dumped ie8 xD

  • Christopher Brown
    Christopher Brown

    Also adding wikipedia.org to the compatibility list in IE ( Tools > Compatibility View Settings ) seemed to work for me.

  • Anonymous
    Anonymous

    I was getting this problem with lots of sites, in particular Dev Shed which was arkward since I’m a moderator there. I’ve been running with the global CSS rule since my initial post with no apparent problems. Wow, that’s almost a year ago now. They might of sorted it in the meantime, I haven’t bothered removing the user style sheet so I don’t really know.

  • Aaron Lozier
    Aaron Lozier

    This issue just appeared for me suddenly today. It took about an hour of searching before I found your post which resolved the issue. Thanks!

  • Mick
    Mick

    @Christopher Brown: I fixed this annoying issue with the Compatibility View settings. Thx

  • suryakant ubhe
    suryakant ubhe

    In my web site, I apply the body font is ‘futurabook’. but all browser and version are not to be proper apply.
    for eg. In Mozilla Firefox you see this web site, It look good,
    But in IE8 is font change.

    please give me information what i do in this problem.

    thx u

    surya

  • Anonymous
    Anonymous

    Well you are kind of describing the reason I wrote the article. The solution I used is written in the main post and a few other people have said they just enable “Compatibility Mode” by clicking the little blue broken page icon next to the address bar. I’m on IE9 now and the problem seems to of sorted itself out so I don’t use the global CSS clear file anymore.

When you kill a man, his weight falls upon you. Everything he was. Everything he now will never be. And if you try to carry that weight you’ll tire. Soon you will be unable to move, to hold your sword and sure enough, the man you fought, the man you trained so hard to defeat, to vanquish, he has vanquished you.

— Aulus, Britannia