Does @ font-face work in all browsers?

Question

Does @ font-face work in all browsers?

How can i use @ font-face?

Answer 1

Check out: @ font-face browser support

Webkit / safari

• from version 3.1
• Font Formats:
  • TrueType / OpenType TT (.ttf)
  • OpenType PS (.otf)
  • SafariMobile (iPhone / iPad): SVG fonts only
• Additional information: http://webkit.org/blog/124/downloadable-fonts/
• Wiki Code Samples

Opera

• so Opera 10: http://www.opera.com/browser/ and Opera Mobile 9.7
• Font Formats:
  • TrueType / OpenType TT (.ttf)
  • OpenType PS (.otf)
  • SVG (.svg)
• Additional information: http://dev.opera.com/articles/view/seven-web-fonts-showcases/

Internet explorer

• since IE 4
• Font Formats:
  • Built-in OpenType (EOT) created by Microsoft WEFT
  • WOFF with IE9
• Additional information: http://www.microsoft.com/typography/web/embedding/default.aspx
• Wiki Code Samples

Mozilla / Firefox

• with firefox 3.5
• Font formats
  • TrueType / OpenType TT (.ttf)
  • OpenType PS (.otf)
  • WOFF (since Firefox 3.6)
• Wiki Code Samples

Google chrome

• Chrome 4.0 has a stable version. As of January 25, 2010
• In Chrome 3.0, you can run the executable using the command line: --enable-remote-fonts 1
• It was disabled by default for security review: 2 [3], [4]
• Read more about chrome and @ font-face here
• Font formats
  • TrueType / OpenType TT (.ttf)
  • OpenType PS (.otf)
  • WOFF from version 6

Netscape

• starting with version 4, discontinues since Netscape Navigator 6
• Font Formats:
  • Portable font resource (.pfr)
• additional information: http://en.wikipedia.org/wiki/TrueDoc

Regarding usage, check this out:

• Web Printing Potential:

Answer 2

Not all browsers, but all large ones (Chrome, IE, FireFox, Opera, Safari). A Sarfraz message shows what it will work with.

Here is an example of how to use it:

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

Answer 3

I highly recommended you use http://www.fontsquirrel.com/fontface/generator to create fonts and CSS to use.

It will work in all browsers instantly. I tried to fix it myself, but there are some unpleasant differences. Also, this worked too much in the Android browser, and IE8 and below was complicated.

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

Answer 4

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