Search the Community

Hey everyone, I've been starting to use @font-face in the last year or so seeing that most major browsers support it now. I usually just use 1-3 fonts max, but most often I include the italics version, bold and italic bold version, which can easily amount to a couple MBs of data minimum (depending on the font). Since I use EOT, TTF, WOFF and SVG to work in most browsers, the filesize augments. I don't want too much bandwidth (and load time) used, especially when it's not absolutely necessary upon the customer's request, so I was wondering : say if Firefox (or any browser) successfully loads the EOT version of the file, will that browser still download all 3 others or it will specifically ignore the rest? If it does ignore the rest (not download them) then bandwidth would be much less of an issue. I know some of you might say "well, bandwidth nowadays...", but I still prefer to keep things minimal by habit.

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.