@font-face or sIFR 3?

Question

I've to implement custom font in a website, What should be used. Client is providing custom fonts.

• All browser support (Including IE6 and in all A Grade Browsers)
• text Selectable
• Selection visible
• Accessible with screen reader
• Successfully degradable if JS is disabled
• Easy to implement and manage in less time
• Mobile browser compatible
• less performance issue
• No purchase needed
• Can be used as a link also
• Font should look smooth like in Photoshop

or is there any other better and free solution which has all these things?

Answer 1

@font-face does not support IE6 as good as you would want it to. So if that is your requirement, don't use it.

Browser consistency is also a big problem with @font-face

Answer 2

I think you'd be better served to consider using images with Alt tags selectively, and relying on good usage and tasteful standard fonts.

Answer 3

Why not just use the bulletproof @font-face syntax as described by Paul Irish and back it up with alternate styles and javascript in conditional IE tags?

IE:

<style type="text/css">
...
@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'), 
         url('GraublauWeb.otf') format('opentype');
}
...
</style>
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="ie_6styles.css" />
<script type="text/javascript" src="Cufon.js"></script>
<script type="text/javascript">
   Cufon.init();
</script>
<![endif]-->

The only part of your requirements that is not met by this setup right off the bat is mobile compatibility across the board. Once you determine what platforms you want to support, this solution should be extensible enough to allow support for all of them as well.

Answer 4

If I were you id use @font-face and deliver a javascript solution (like cufón) to the unsupported browsers.

1. use fontsquirrel
2. and a javascript filter