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.