@font-face makes layout messed up

Hi all,
I’m using the Twenty Ten 1.2 theme on WordPress 3.1.4.

I wanted to use the @font-face code on my layout, but whenever I define it on my style.css, it messes up my layout. 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):
https://i213.photobucket.com/albums/cc134/ifgfdallas/Web%20Stuffs/without_fontface.jpg
You can also view it live: https://www.ifgfdallas.org

Now, here is how it looks like, all messed-up, when I put on the font-face code:
https://i213.photobucket.com/albums/cc134/ifgfdallas/Web%20Stuffs/with_fontface.jpg

And this is the code that it put in:

@font-face {
    font-family: Museo Sans;
    src: url("fonts/MuseoSans.eot");
    src: local('Museo Sans'), local(Museo Sans'),
    url("fonts/MuseoSans.otf") format('opentype'),
    url("fonts/MuseoSans.woff") format("woff"),
    url("fonts/MuseoSans.svg") format("svg");
}

Anyone has any clues? What did I do wrong?

NOTE: I tested the layout on my old Firefox 3.6 and Google Chrome, and it actually worked fine WITH the font-face code. However, when I upgraded my Firefox to Firefox 5, the layout was all messed up, just because of that font-face code.