Web Fonts Not Interpreted Correctly By Browsers -- Only Ie Works

[nodirtyrockstar]

I am having a problem with a webfont I got from Google. It only works in IE, which I found amusing.

 

Here is the CSS font-face declaration:

 

@font-face {
font-family:BerkshireSwash-Regular;
src: url('../font/BerkshireSwash-Regular.eot');
src: url('../font/BerkshireSwash-Regular.eot?#iefix') format('embedded-opentype'),
url('../font/BerkshireSwash-Regular.otf') format('opentype'),
url('../font/BerkshireSwash-Regular.woff') format('woff'),
url('../font/BerkshireSwash-Regular.ttf') format('truetype'),
url('../font/BerkshireSwash-Regular.svg#BerkshireSwash-Regular'), format('svg');
font-weight: normal;
font-style: normal;
}


h1, h2, h3, h4, h5, h6 {
font-family: 'BerkshireSwash-Regular', 'Times New Roman', serif;
text-align: center;
}

 

I checked it in the newest version of the top five browsers: Opera, FF, IE, Chrome, and Safari. As I said, IE is the only one that's correctly interpreting the font files. I have all the sources uploaded to my server as well, eot, ttf, woff, ttf, and svg. I also made sure to add all the MIME types to my .htaccess. 

 

AddType "application/vnd.ms-fontobject" .eot
AddType "application/x-font-opentype" .otf
AddType "application/x-font-truetype" .ttf
AddType "application/x-font-ttf" .ttf
AddType "application/x-font-woff" .woff
AddType "image/svg+xml" .svg

 

Does anyone have any suggestions? Let me know if you need more information.

[haku]

Font-face is tricky to get working cross-browser. I use this generator, and it works cross-browser every time: http://www.fontsquirrel.com/fontface/generator

[nodirtyrockstar]

Yeah, something about that font I was using just wouldn't go. The font-kits at font squirrel are working. Thanks