Does @font-face work in all browsers?

Does @font-face work in all browsers ?

How can开发者_StackOverflow i use @font-face?

Check out: @font-face browser support

Webkit/Safari

• since version 3.1
• font formats:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • SafariMobile (iPhone/iPad): only SVG Fonts
• More info: http://webkit.org/blog/124/downloadable-fonts/
• Wiki: Code samples

Opera

• since Opera 10: http://www.opera.com/browser/ and Opera Mobile 9.7
• font formats:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • SVG (.svg)
• More info: http://dev.opera.com/articles/view/seven-web-fonts-showcases/

Internet Explorer

• since IE 4
• font formats:
  • Embedded OpenType (EOT) created by Microsoft's WEFT tool
  • WOFF since IE9
• More info: http://www.microsoft.com/typography/web/embedding/default.aspx
• Wiki: Code samples

Mozilla/Firefox

• since Firefox 3.5
• font formats
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • WOFF (since Firefox 3.6)
• Wiki: Code samples

Google Chrome

• In Chrome 4.0 stable release. As of January 25th, 2010
• In Chrome 3.0, you could run the executable with a command line switch of: --enable-remote-fonts 1
• It was disabled by default for security review: 2 [3], [4]
• More details on chrome and @font-face here
• font formats
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • WOFF since version 6

Netscape

• since version 4, discontinued since Netscape Navigator 6
• font formats:
  • Portable Font Resource (.pfr)
• more info: http://en.wikipedia.org/wiki/TrueDoc

As for usage, check this out:

• The Potential of Web Typography:

Not all browsers but all of the big ones (Chrome, IE, FireFox, Opera, Safari). Sarfraz's post shows which it will work with.

Here's an example of how to use it:

@font-face {
font-family: DeliciousRoman;
src: url(/Delicious-Roman.otf);
}

I highly recommoned you use http://www.fontsquirrel.com/fontface/generator to create the fonts and the css for you to use.

It will work in all browsers instantly. I tried fixing it myself, but there are some annoying differences to handle. Also getting it too work on Android browser AND IE8 and lower was difficult.

Using the website above, you will get it working quickly without any javascript or other hacks.

You can always ask: http://caniuse.com/#search=font-face