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.php?title=En/CSS/%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)

http://www.custom-anything.com/sand/dos_site.JPG

[bluewalrus]

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