Why is @font-face throwing a 404 error on woff files?

Question

I'm using @font-face on my company's site and it works/looks great. Except Firefox and Chrome will throw a 404 error on the .woff file. IE does not throw the error. I have the fonts located at the root but I've tried with the fonts in the css folder and even giving the entire url for the font. If remove those fonts from my css file I don't get a 404 so I know it's not a syntax error.

Also, I used fontsquirrels tool to create the @font-face fonts and code:

@font-face 
{
font-family: 'LaurenCBrownRegular';
src: url('/laurencb-webfont.eot');
src: local('☺'), 
     url('/laurencb-webfont.woff') format('woff'), 
     url('/laurencb-webfont.ttf') format('truetype'), 
     url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face 
{
font-family: 'FontinSansRegular';
src: url('/fontin_sans_r_45b-webfont.eot');
src: local('☺'), 
     url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
     url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
     url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
font-weight: normal;
font-style: normal;
}

Answer 1

I'm not having any problems, but my code looks a little different:

@font-face
{
    font-family: 'NewAthenaUnicodeRegular';
    src: url('fonts/new_athena_unicode.eot');
    src: local('New Athena Unicode Regular'), 
        local('NewAthenaUnicode'), 
        url('fonts/new_athena_unicode.woff') format('woff'), 
        url('fonts/new_athena_unicode.ttf') format('truetype'), 
        url('fonts/new_athena_unicode.svg#NewAthenaUnicode') format('svg');
}

Are your directory names correct? Why does 'local' have that funny face? And is this happening with all your fonts, or just these?

Answer 2

Solved it:

I had to use Mo'Bulletproofer method