Embedded fonts not working in Firefox and IE

[buenodesign]

I've embedded three fonts onto this website: http://bbloft.ca/bb/
It seems to be working on Google Chrome and Safari, but won't show up on Firefox and IE.
Any help or suggestions would be much appreciated.

Here is the CSS code:

@font-face{ font-family: "America Typewriter"; src: url("fonts/america-typewriter.ttc");}
@font-face{ font-family: "Century Gothic""; src: url("fonts/century-gothic.ttf");}
@font-face{ font-family: "Infinita"; src: url("fonts/infinita.ttf");}
h1, h2, h3 { font-family: "Infinita", "Century Gothic", Helvetica, Arial, sans-serif;  font-weight: normal; }
.main_header_about, .main_header_left { font-family: "Century Gothic", Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 100; }
p { font-family: "Century Gothic", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px; }
#menu_section .sf-menu, .sf-menu li a, .sf-menu > li > a { font-family: "Infinita", "Century Gothic", Helvetica, Arial, sans-serif;  font-size: 26px; font-weight: 200; }
#top_form_close, .menu_at_top #menu_section, .menu_at_top .sf-menu li a, #searchform_top input, 
#searchform_top input:focus, .fount_forced_menu #menu_section, .fount_forced_menu .sf-menu > li > a, 
.fount_forced_menu #searchform_top input, .fount_collapsed_menu #top_form_close, 
.fount_collapsed_menu #menu_section, .fount_collapsed_menu .sf-menu > li > a, 
.fount_collapsed_menu #searchform_top input {font-family: "Infinita", "Century Gothic", Helvetica, Arial, sans-serif;
    color: #F60;
    font-weight: 100;
}

[jscheuer1]

Custom fonts and their usage vary from browser to browser and sometimes platform to platform. One should always have a suitable generic font as a backup so that the page is accessible if the custom font is not.