@font-face fine on Firefox 3.6, but messed up layout on Firefox 5

Hi all, I've been testing a wordpress website that I design using Firefox 3.6. I used the @font-face code in my style.css file and it worked just fine. However, when I upgraded to Firefox 5 just now, the layout was all messed up, just because of that font-face code. It seems like it "disables" all the CSS and therefore the layout looks really bad (like it has no CSS defined at all). Here is how it supposed to look like (WITHOUT the font face code): http://i213.photobucket.com/albums/cc134/ifgfdallas/Web%20Stuffs/without_fontface.jpg You can also view it live: http://www.ifgfdallas.org Now, here is how it looks like, all messed-up, when I put the font-face code: http://i213.photobucket.com/albums/cc134/ifgfdallas/Web%20Stuffs/with_fontface.jpg Anyone has any clues?