Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

We're looking at buying a font which only allows its use on the web in the provided formats: WOFF and EOT.

I'm not sure what browsers those work in and can't seem to find up to date information. What browsers can I suport with just those two?

My only experience is with fontspring's syntax which has EOT, WOFF, TTF and SVG.

share|improve this question

3 Answers 3

This is the standard way of loading with @font-face, hacky fixes and all!!

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

But remove SVG and you'll lose support for iOS < 5.0 almost completely

Can I Use has an excellent table for browser support generally another for EOT, another for WOFF, yet another for SVG and finally one more for TTF. I've inserted them below for clarity, and this should guide you on what to test, but bear in mind this will change quite rapidly.

Edit by wyu: I've compiled a table so you can view support side by side

@font-face browser support generally

@font-face browser support generally

EOT browser support

EOT browser support

WOFF browser support

WOFF browser support

SVG browser support

SVG browser support

TTF browser support

TTF browser support

share|improve this answer
3  
why is eot declared in two different ways - .eot and .eot?#iefix ? –  sam Nov 7 '12 at 21:17
1  
1  
For anyone who checks this answer in the future... Android >= 4.4 now supports WOFF caniuse.com/#feat=woff –  ozke Oct 1 at 14:35

SVG won't get you anywhere with @font-face; but, EOT is supported by IE; where as, TTF and OTF are supported by all of the other major browsers. As for WOFF, from doing some reading, with its similarity to TTF and OTF it's pretty probable that it's supported in the same browsers as TTF or OTF. My suggestion, if you are really interested, try each @font-face extension out in a browser and see what you get, and then submit what you got to W3C for them to update their standards page for the @font-face descriptor. (It doesn't even include "safe" font extensions currently).

If all else fails I'm pretty sure W3Schools is up-to-date: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

share|improve this answer
    
The problem is that Safari Mobile 4.1 and below only supports SVG. –  toomanyairmiles Mar 9 '12 at 9:50
    
@toomanyairmiles That's why in the end, it's make it look good for your "default" and then make it look amazing for those that "can" view it. Can't have 100% coverage since most fonts don't have an OTF, EOT, AND SVG of themselves. –  Jeff Langemeier Mar 14 '12 at 14:17
    
Actually you can. I've built several sites which do have 100% coverage by buying fonts which come in all four types, or using free fonts and generating the files myself - works perfectly. –  toomanyairmiles Mar 14 '12 at 16:33
    
@toomanyairmiles This is where fast and loose typing kills me, needed Can't always have 100% coverage, sometimes it doesn't happen and the designer needs to remember that in the worst case scenario that people are using old browsers and such, 100% coverage doesn't always mean 100% coverage; where I'm at roughly 40-50% of internet users are still using IE 7 or older, which don't support font-face very well in the first place, to have true 100% coverage there needs to be a bottom line that looks "decent" or at least keeps your site within the constraints of the "fancier" fonts. –  Jeff Langemeier Mar 14 '12 at 19:58
    
Well, I've tried it, on small sites and those of major brands. The fonts work in IE6 and 7 is the render quality as good as a modern browser? No, but it works just fine. –  toomanyairmiles Mar 14 '12 at 23:09

Webfont vendors really need to provide eot support off the bat for their fonts - specifically because of this! You would think this would be second nature, even for cloud based (with option to include or exclude) - if people are forced to hunt down blacklisted fonts, wouldn't that only encourage piracy once the fonts are found? @eb_p1

share|improve this answer
    
Wait, why? EOT was dead when this question was first asked, it was a rotting corpse when you answered, and today I haven't seen an EOT font in over a year. –  SilverbackNet Jul 29 at 3:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.