Embedded fonts not working in Firefox 3.5

[Sigvatr]

I've been trying to get an embedded font to work on my site for several hours now and I have no idea what is wrong.

The site is http://www.sigvatr.com

It actually works perfectly in Internet Explorer as far as I am aware, but in Firefox it just goes crazy.

Anyone have any ideas what might be wrong?

Here's the CSS:

@font-face
	{
	font-family:			'Perfect DOS VGA 437';
	src:				url('http://www.sigvatr.com/dosfont.eot');
	}
@font-face
	{
	font-family:			'Perfect DOS VGA 437';
	src:				url('http://www.sigvatr.com/dosfont.ttf');
	}
body
	{
	background-color:		#545454;
	background-image:		url('http://www.sigvatr.com/background.png');
	background-attachment:		fixed;

	margin-top:			0px;
	margin-left:			0px;
	margin-bottom:			0px;
	margin-right:			0px;
	}
p
	{
	margin-top:			0px;
	margin-bottom:			32px;
	}
.scanlines
	{
	filter:				alpha(opacity=85);
	opacity:			0.85;
	}
.text
	{
	color:				#a80000;
	background-color:		#000000;	
	font-family:			'Perfect DOS VGA 437';
	font-size:			24pt;
	font-weight:			normal;
	text-align:			left;
	text-decoration:		none;
	line-height:			1;
	}
.text a
	{
	color:				#000000;
	background-color:		#a80000;
	text-decoration:		none;
	}
.text a:hover
	{
	color:				#a80000;
	background-color:		#fc5454;
	text-decoration:		none;
	}
.text a:active
	{
	color:				#a80000;
	background-color:		#fc5454;
	text-decoration:		none;
	}
.border
	{
	color:				#545454;
	background-color:		#a8a8a8;
	}
.header
	{
	color:				#545454;
	background-color:		#a8a8a8;	
	font-family:			'Perfect DOS VGA 437';
	font-size:			24pt;
	font-weight:			normal;
	text-align:			left;
	text-decoration:		none;
	line-height:			1;
	}
.header a
	{
	color:				#545454;
	background-color:		#a8a8a8;
	text-decoration:		none;
	}
.header a:hover
	{
	color:				#000000;
	background-color:		#545454;
	text-decoration:		none;
	}
.header a:active
	{
	color:				#000000;
	background-color:		#545454;
	text-decoration:		none;
	}
.name
	{
	color:				#545454;
	background-color:		#a8a8a8;	
	font-family:			'Perfect DOS VGA 437';
	font-size:			24pt;
	font-weight:			normal;
	text-align:			left;
	text-decoration:		none;
	line-height:			1;
	}
.name a
	{
	color:				#545454;
	background-color:		#a8a8a8;
	text-decoration:		none;
	}
.name a:hover
	{
	color:				#000000;
	background-color:		#545454;
	text-decoration:		none;
	}
.name a:active
	{
	color:				#000000;
	background-color:		#545454;
	text-decoration:		none;
	}	
.shadow
	{
	color:				#545454;
	background-color:		#000000;	
	}
.button
	{
	color:				#a80000;
	background-color:		#000000;	
	font-family:			'Perfect DOS VGA 437';
	font-size:			24pt;
	font-weight:			normal;
	text-align:			left;
	text-decoration:		none;
	line-height:			1;
	}
.button a
	{
	color:				#a80000;
	background-color:		#000000;
	text-decoration:		none;
	}
.button a:hover
	{
	color:				#fc5454;
	background-color:		#a80000;
	text-decoration:		none;
	}
.button a:active
	{
	color:				#fc5454;
	background-color:		#a80000;
	text-decoration:		none;
	}	
.comments
	{
	color:				#a80000;
	font-family:			'Perfect DOS VGA 437';
	font-size:			24pt;
	font-weight:			normal;
	text-align:			right;
	text-decoration:		none;
	}
.comments a
	{
	color:				#a80000;
	background-color:		#000000;
	text-decoration:		none;
	}
.comments a:hover
	{
	color:				#fc5454;
	background-color:		#a80000;
	text-decoration:		none;
	}
.comments a:active
	{
	color:				#fc5454;
	background-color:		#a80000;
	text-decoration:		none;
	}
.copyright
	{
	color:				#000000;
	background-color:		#545454;	
	font-family:			'Perfect DOS VGA 437';
	font-size:			24pt;
	font-weight:			normal;
	text-align:			center;
	text-decoration:		none;
	line-height:			1;
	}
.copyright a
	{
	color:				#000000;
	text-decoration:		none;
	}
.copyright a:hover
	{
	color:				#545454;
	background-color:		#000000;
	text-decoration:		none;
	}
.copyright a:active
	{
	color:				#545454;
	background-color:		#000000;
	text-decoration:		none;
	}	
.imageright
	{
	float:				right;
	position:			relative;
	margin-bottom:			18px;
	display:			block;
	}
.imageleft
	{
	float:				left;
	position:			relative;
	margin-bottom:			18px;
	display:			block;
	}
.input
	{
	color:				#fc5454;
	background-color:		#a80000;
	background-image:		url('input_background.png');
	font-family:			'Perfect DOS VGA 437';
	font-size:			24pt;
	font-weight:			normal;
	text-align:			left;
	text-decoration:		none;
	line-height:			1;
	border-style:			solid;
	border-left-width:		17px;
	border-right-width:		0px;
	border-color:			#000000;
	margin-top:			-6px;
	padding:			0px;	
	}
.form
	{
	color:				#fc5454;
	background-color:		#a80000;
	background-image:		url('form_background.png');
	font-family:			'Perfect DOS VGA 437';
	font-size:			24pt;
	font-weight:			normal;
	text-align:			left;
	text-decoration:		none;
	line-height:			1;
	border-style:			solid;
	border-left-width:		17px;
	border-right-width:		0px;
	border-color:			#000000;
	margin-top:			-2px;
	padding:			0px;	
	}	
.submit
	{
	color:				#545454;
	background-color:		#a8a8a8;
	font-family:			'Perfect DOS VGA 437';
	font-size:			24pt;
	font-weight:			normal;
	text-align:			left;
	text-decoration:		none;
	line-height:			1;
	border-style:			solid;
	border-top-width:		28px;
	border-bottom-width:		28px;
	border-left-width:		15px;
	border-right-width:		15px;
	border-color:			#a8a8a8;
	padding:			0px;	
	}
.archives
	{
	color:				#a80000;
	background-color:		#000000;	
	font-family:			'Perfect DOS VGA 437';
	font-size:			24pt;
	font-weight:			normal;
	text-align:			left;
	text-decoration:		none;
	line-height:			1;
	}
.archives a
	{
	color:				#a80000;
	background-color:		#000000;
	text-decoration:		none;
	}
.archives a:hover
	{
	color:				#fc5454;
	background-color:		#a80000;
	text-decoration:		none;
	}
.archives a:active
	{
	color:				#fc5454;
	background-color:		#a80000;
	text-decoration:		none;
	}

[bluewalrus]

hmmm apparently I'm wrong it doesn't work in opera or firefox but it does work in safari.

[Sigvatr]

I'm having a lot of people reporting that the site is working perfectly in Internet Explorer. I can verify this, because when I run the site on a different computer, it downloads the font from the site before rendering it, which takes less than a second.

For some reason, Firefox does not want to download the font, even though I am using the same exact code as other sites use to download an embedded font. It doesn't work on my site, but it does on other people's. I don't understand.

[bluewalrus]

It doesn't work on my computer in Firefox or Opera but works fine in Safari. Try some other browsers to see if it works in one of them for you as well. I don't know why it doesn't work though on the mozilla documentation it should work. I have ff 3.5.3 and their example code looks the same as yours and works on my comp.

Maybe someone else will see a difference I'm missing.
https://developer.mozilla.org/index....S/%40font-face

You could try putting another font after that first font name as a back up incase it doesn't work.

[Sigvatr]

I have a feeling it might not be working due to the non-standard glyphs that my page is using. However, that does not explain how all of the standard glyphs (letters, etc) do not work either.

[traq]

I tried using embedded fonts a while ago, but I gave it up and just went back to using pictures of my fancy fonts. Maybe I'll try again someday... or just wait patiently until CSS3 becomes universally supported...

what filetype is your font? IE uses .eot, but noone else supports that. No matter what anyone says, @font-face support is not cross-browser.

Your site looks cool. In IE, anyway; it took about fifteen seconds to load in Fx3, and I didn't get the font.

[Sigvatr]

I managed to get it to work in Firefox now.

[traq]

? I still see this (firefox3)

[bluewalrus]

The initial load is like traq's post but then it converts for me in ff.