views:

1003

answers:

5

I'd like to use a non-standard web font to improve the appearance of my HTML.

Is it preferable to embed a web font or use something like sifr?

My understanding is sifr is a flash-based viewer for vector fonts but I've been reluctant to try it because it seems somewhat complicated.

There does not seem to be a lot of encouraging talk about web font embedding (because of legal issues) so maybe sifr is more of a standard way to do this?

Any feedback would be appreciated. Thanks.

+2  A: 

Something to consider:

For every visitor who sees your 'better looking' fonts, there are just as many who won't due to having an incompatible browser or disabling that feature. Having just the right font probably isn't the most valuable design change you could work on.

Written from my mobile browser which doesn't do embedded fonts.

caskey
It's not a 50/50 split. There are definitely many more people/browsers that support either sIFR or embedded fonts than not. Either way, both methods gracefully degrade for those browsers that do not support them.
musicfreak
@musicfreak: embedded fonts only gracefully degrade to fonts with the same metrics, something not everybody knows about.
ilya n.
@ilya n: Really? I did not know that... Honestly I've never tried embedded fonts simply because of the lack of browser support, but I see nothing wrong with sIFR. It's a great tool for those that support it, and those that can't see normal text.
musicfreak
"Written from my mobile browser which doesn't do embedded fonts." Clearly, you are an unbiased party on this issue then eh?
TM
+2  A: 

You could also consider the JS alternative(s). However, for best cross browser compatibility you're better off using images and perhaps a background-image and text-indent CSS trick to replace static text with your images.

The technique I mentioned above (and others) can be read here: http://css-tricks.com/nine-techniques-for-css-image-replacement/

alex
Interesting. What's the best keyword combo to search for more info on that? "background-image text-indent CSS"? Thanks for the suggestions.
carson welsh
I've added a link Carson
alex
+2  A: 

Note that CSS3 Web Fonts module, which defines font embedding is still a Working Draft. Indeed, the practical support of font embedding isn't good. I'd say it's better to wait another 2-3 years.

ilya n.
+1, I was going to write the same thing. I believe WebKit is the only popular browser engine to support embedded fonts in a stable release.
musicfreak
Opera supports embedded fonts, and the next version of Firefox will support it as well. Font embedding is a key part of the ACID 3 test, which all of the major browsers v.next, except for IE8, are currently aiming to pass. I wouldn't say 2-3 years...more like 6 months to a year before its generally feasible, with IE getting support sometime after that.
jrista
Life of a web developer would be so much simpler without IE...
ilya n.
@jrista: But no one uses Opera. :) And, unfortunately, you just can't ignore IE at this point, which means the 2-3 year estimate is fairly accurate...
musicfreak
@jrista IE8 is not v.next.
David Dorward
+10  A: 

Web fonts are supported in Safari 3.1, the upcoming Firefox 3.5 and the upcoming Opera 10. Internet Explore has supported a (different) format since IE4.

At this point, the biggest problems with the implementation in Safari, Firefox and Opera is that they require you to upload the original font file to your web server. For many fonts, this would constitute a violation of the license you received from the type foundry. Therefore, web fonts right now are not an appropriate solution if the type foundry has not given you permission to use them. However, there are freely licensed fonts available.

This leaves us with roughly three other options: images, Flash, and JavaScript-based solutions. Images are often preferable in that they have minimal impact with regards to browser quirks and performance, however dynamic image generation in, say, PHP often does not look as good as other solutions. You could of course manually create images in Photoshop, but that would usually defeat the purpose.

sIFR uses Flash to render the text, and is quite flexible in that you can select the text, change it dynamically, and have some control over the styling of nested HTML elements. Hoefler & Frere-Jones has given sIFR the OK, provided you pay for a server license and take all possible measures in limiting the sIFR Flash movie to your domain name.

Cufón is a purely JavaScript solution that has implemented its own rendering engine, which is insanely clever. At this point its not as flexible as sIFR, and its legal issues are still unclear.

That said, images, sIFR and Cufón are all hacks, and we need proper web fonts yesterday.

(Disclaimer: I'm the lead developer of sIFR, so I might be somewhat biased.)

Mark Wubben
Wow, privilege to have you here. Thanks for the response Mark.
carson welsh
+1  A: 

Also worth nothing: TypeKit, a service that gives you a line of JavaScript to abstract all of this away.

Jim Puls