Having problem loading custom font

[HGeneAnthony]

I'm trying to use a custom font or my site.  I have it downloaded and it appeared to be working in Internet Explorer 9, Chrome, Opera, but didn't work in Firefox 12.  It was the Broadway font.  I decided to use another custom font and it wouldn't work at all in any of my browsers.  I then installed the Broadway font in my system and it started to work in Firefox.  However, when I uninstalled it didn't work in any browsers since.  What I'm wondering is how does the custom font work?  I thought it was supposed to work even if the font was not installed on the user's computer but I'm wondering now if it's referencing a font on the user's computer.  Here's my CSS:

 

@font-face {

    font-family: Broadway;

    src: url("broadway.tff");

}

 

#banner {

    font-weight: bold;

    font-size: 56px;

    font-family: "Broadway", Arial, Helvetica, sans-serif;

    text-shadow: 0px 2px 3px #E6E6FF; 

    margin-bottom: 10px;

    padding: 20px;   

}

 

The font resides in the root directory.  Is there something I'm missing?

 

 

 

[MarPlo]

The problem with @font-face is that the browsers not recognise the same file font format.

IE supports Embedded OpenType Font format (.eot). Firefox, Chrome, Safari, and Opera support fonts of type OpenType Face (.otf) and TrueType Format (.ttf).

You should add two @font-face, for the same font, with .eot, and .ttf files.

The Font Squirrel @font-face Generator ( www.fontsquirrel.com ) takes any uploaded font and converts it into all the formats mentioned earlier as well as offers sample CSS embedding code.

[HGeneAnthony]

Thank you for replying to me.  I ended up using the fontsquirrel website and got it working.  The strange thing is Firefox was the only one that gave me problem.  I expected IE to be the problem if anything.