[Solved] @font-face give 404 with woff file

[dcp3450]

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:

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;
}

[dcp3450]

Solved it:

I had to use Mo’Bulletproofer method: http://readableweb.com/mo-bulletproofer-font-face-css-syntax/

[Author]

Posts