@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?

Although licensing issue comes with both I know in both method we will share font publically, As a font's sIFR SWF if we use sIFR and TTF/OTF/EOT if we use @font-face. — Jitendra Vyas, Mar 02 '10 at 11:29

score 2 · Answer 1 · answered Mar 02 '10 at 18:28

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.

There is currently no solution that meets all your needs. Everything is a trade-off. But if you start with the the proper CSS (@font-face) and back it up as needed, like Sean suggests, you are on the right track. — Miriam Suzanne, Mar 03 '10 at 21:42

Knu · Answer 2 · 2011-06-09T07:00:44.923

1

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

use fontsquirrel
and a javascript filter

edited Jun 09 '11 at 07:00

answered Mar 03 '10 at 12:27

Knu

14,806
5
56
89

I didn´t even know there was something as @font-face, and I have been suffering a lot with sIFR :O – Jaime Hablutzel Mar 02 '11 at 21:20

score 0 · Answer 3 · answered Mar 02 '10 at 11:33

0

@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

answered Mar 02 '10 at 11:33

douwe

1,305
10
12

What is the problem with IE6? – Jitendra Vyas Mar 02 '10 at 11:34
Which browsers do not support @font-face face? – Jitendra Vyas Mar 02 '10 at 11:35
He also says 'Font should look smooth like in Photoshop'. Ain't gonna happen in IE6. In IE you should use EOT. They are a hell to make / work with. – douwe Mar 02 '10 at 11:38
ok in IE6 only Font will not look smooth as it looks in Photoshop, otherwise no problem – Jitendra Vyas Mar 02 '10 at 11:44

score 0 · Answer 4 · answered Mar 02 '10 at 18:12

0

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

answered Mar 02 '10 at 18:12

Keith Adler

20,880
28
119
189

@font-face or sIFR 3?

4 Answers4