17

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.

Improve this question
1

3 Answers 3

Reset to default
23

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

Improve this answer
5
  • 3
    why is eot declared in two different ways - .eot and .eot?#iefix ?
    – sam
    Nov 7, 2012 at 21:17
  • 1
    @sam stackoverflow.com/questions/8050640/…
    – Diego Agulló
    Jan 3, 2013 at 7:15
  • 2
    For anyone who checks this answer in the future... Android >= 4.4 now supports WOFF caniuse.com/#feat=woff
    – ozke
    Oct 1, 2014 at 14:35
  • 3
    Dear @ozke, I am from the future, thank you for sharing this useful fact. You may also be interested to know that, by the end of 2015, usage of versions of the Android stock browser that don't support woff will drop to less than 2% of global users, and the stock Android browser will be eclipsed by Chrome for Android (16%) and UC (8%), both of which support woff. Firefox for Android, too; however, its usage will never exceed 1%. You may now return to listening to "All About That Bass" by Meghan Trainor, which I understand was customary in October 2014.
    – user56reinstatemonica8
    Dec 2, 2015 at 17:09
  • so you only need web fonts now?
    – SuperUberDuper
    Apr 4, 2016 at 19:12
1

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

Improve this answer
6
  • The problem is that Safari Mobile 4.1 and below only supports SVG.
    – toomanyairmiles
    Mar 9, 2012 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, 2012 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, 2012 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, 2012 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, 2012 at 23:09
1

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

Improve this answer
1
  • 1
    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, 2014 at 3:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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