Stunning CSS3
A Project-based Guide to the Latest in CSS
@font-face File Types Browser Support
This article is an excerpt from Chapter 3 of the book Stunning CSS3: A Project-based Guide to the Latest in CSS, but is kept continually updated. It was last updated in November 2012.
For more updated articles from the book, go to Resources. You can also learn more about the book and download sample chapters.
The @font-face rule has good browser support, but different browsers want you to use different font file types. The table below provides a summary of which browsers support which font type. Each browser version number noted in this table is the earliest—not the only—version of that browser to support that type.
| WOFF | OTF | TTF | SVG | EOT | |
|---|---|---|---|---|---|
| IE | 9 | 9 | 9 | no | 4 |
| Firefox | 3.6 | 3.5 | 3.5 | no | no |
| Opera | 11.1 | 10 | 10 | 10 | no |
| Opera Mobile | 11.0 | 9.7 | 9.7 | 9.7 | no |
| Safari | 5.1 | 3.1 | 3.1 | 3.1 | no |
| Chrome | 6 | 4* | 4* | 0.3 | no |
| Safari on iOS | 5 | no | 4.2 | 3.1 | no |
*Chrome 3 supported OTF and TTF fonts, but not by default—you had to do a command-line switch to enable it.
