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.

Jeff Langemeier
  • 210
  • 1
  • 6
erik
  • 171
  • 1
  • 1
  • 3

3 Answers3

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

Community
  • 1
toomanyairmiles
  • 12,555
  • 2
  • 27
  • 49
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

Jeff Langemeier
  • 210
  • 1
  • 6
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

eburnett
  • 11
  • 1