: If I have only WOFF and EOT, what browsers am I supporting with @font-face? We're looking at buying a font which only allows its use on the web in the provided formats: WOFF and EOT. I'm

@Sherry384

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

Vote Up Vote Down

@Samaraweera270

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





EOT browser support





WOFF browser support





SVG browser support





TTF browser support

Vote Up Vote Down

@Gail5422790

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: www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Vote Up Vote Down