Maddening font problem in IE & Firefox

HTML & CSS
1

Hi all, okay so I’m having a really annoying issue, hopefully someone here can shed some light on it:

http://dosgames.com/test/test.html

Load up test.html … it uses @font-family to load the old DOS/console font. I want to use this font in the redesign of my website (DOSGames.com…) for the menus and stuff. It should look fine when you first load the page (ie, not anti-aliased & blurry). However, in Firefox and IE, it only looks un-anti-aliased when the content doesn’t go beyond the window size; ie, when there is no scroll bar. Try it out, load the page, then make the window smaller (in IE & FF) and as soon as the vertical scrollbar appears, the text goes blurry! This does not happen in Chrome.

After a LOT of testing (the actual page I’m working with is a lot more complex than the test.html file) I found that if I remove “margin:0 auto;” from the div the problem disappears, this is exactly the same page except without “margin:0 auto;”:

http://dosgames.com/test/test2.html

So, does anyone have a suggestion to fix this? Should I use a different method to change the fonts? I don’t want to just use images, since there will be a lot of text (I want the whole sidebar to be in this particular font) … is this just a browser bug?! It’s so obscure and annoying …

(The actual new site design uses margin:0 auto to center the two-column layout on the page.)

Thanks!

2

Webfonts are an unreliable technology at best – you’d probably cry if you saw what a Mac does to the rendering of that font, or what it does in Opera and IE here since it auto enlarges 25% as I’m a large font/120 dpi user.

Expecting them to look the same across browsers, or even screen refreshes/redraws is an unrealistic expectation in the best of times, which is why as I rule I’d reserve a webfont like that to headings at 18px or larger, and not even TRY putting it on content areas.

You’d be better off focusing on content and using dynamic fonts with fluid widths, than worrying about a font that a lot of people are going to complain is hard to read… even if it is ‘retro’.

This font in particular is problematic because it’s based on the old IBM VGA font, a RASTER font… raster fonts NEVER translate well to vectors, so it’s just further exacerbating an already bad situation.

This falls squarely into one of those “not viable for web deployment” concepts you’ll occasionally hear me mention – I’d forget it before it starts dragging you down the path towards a broken inaccessible layout and fat bloated slow page.

That said you also aren’t quite using @font-face in a complete manner, and are missing the properties to make other browsers pay attention and omitted a lot of the values that help keep it consistent… like the multiple @font-face declarations, lack of declaring weight and style… done ‘properly’ it should look more like this:


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

Though you’ll need WOFF and SVG versions – which is why I’d upload it to fontsquirrel.
http://www.fontsquirrel.com/fontface/generator

Still, webfonts are ‘cute’, I really don’t consider them real world deployable for anything more than eye-dropper scale use. They cause more problems than they solve and quite often destroy the ability for users to use a page comfortably… in this case you’re trying to use raster shapes in a vector format; that never works at screen resolution sizes.

Off Topic:

BTW, you’re missing a game :smiley:

3

Hey thanks very much for your helpful response! Yeah I kinda knew it wasn’t the “best” way of doing things, I’ll try adding the additional font-face declarations and see if it makes any difference, but I think I may have to give up the idea. (Or only use the font for certain entirely static elements and just make images for those.)

Also, I’ll take a look at your game. :slight_smile: It probably won’t get added until after the redesign, cuz any new games I add now will just add more work later when I go thru the fun process of transferring all the content into a db. -_-ZZZzzz