sIFR, cufon, dynamic font replacement

*Jeff* · 06-12-2010, 04:46 AM

Ever since dabbling with WEFT many many years ago, I've been curious about using more creative, unique fonts for headlines and such.

When I started off in the late 90s I used Fusion where heading banners were generated as images so any font was ok. Then of course, I started trying to use less and less raster elements once CSS came about.

WEFT didn't fly for me back when because of the size involved when people were still using modems.

Now I'm curious if it's time to revisit.

I was quite excited by Randall's link back in 2006 to Dynamic Type Replacement http://futurequest.net/forums/showth...xt+replacement / http://www.alistapart.com/articles/dynatext/

but I didn't go for it then.

Now I see there is cufon http://github.com/sorccu/cufon and sIFR http://www.mikeindustries.com/blog/sifr

I see that http://www.fontburner.com/about_font_burner/ makes it really easy with prepackaged swf fonts of 20 to 30 kb for the full font and js/css code of about 35 kb to make it happen. One thing I like about sIFR is that the text can still actually be highlighted and copied to the clipboard, etc which is pretty cool. Though I suppose on iphone/ipad devices where swf isn't supported users would see a plain-jane (whatever the substitute font is specified as) so the image replacement would be more universal not requiring any plugin. But on the cufon demo sites I'm getting a "old text new text" delay effect where I'm seeing the replacement whereas with sifr it's instant for me in firefox and ie...

Are there other options to look at?

*Jarrod* · 06-12-2010, 03:33 PM

Have you seen Google's Font API for CSS driven fonts?

*Jeff* · 06-12-2010, 06:58 PM

I had not seen that - wow Jarrod that looks much easier even to implement. (and goes beyond font replacement of only titles.)

I get a tiny bit of plan->styled "flicker" in firefox 3.6.3 for some reason but it's acceptable, and it works perfectly (as fast as the page renders) in safari 5, chrome, and internet explorer 8. The only one that I've found that doesn't flicker a tiny bit in firefox for me was the sIFR, but of course, then anyone without flash + javascript will see the plain version. And maybe I shouldn't worry about the very very quick flicker - most people probably wouldn't notice it at all it's so fast.

*johnfl68* · 06-12-2010, 09:27 PM

Have you looked into HTML5 and @font-face??? - You are supposed to be able to do all that in HTML5 now. Look at the Scribd HTML5 demo that shows this (you can actually select the text in the cartoon bubbles and copy and paste it for example):

http://www.scribd.com/doc/30964170/Scribd-in-HTML5

John

*DogAndPony* · 06-13-2010, 07:29 PM

Hey, guys...

I've just started using cufon, on my own site update, with really nice results.

There's also another -- hosted -- option I just stumbled across, called TypeKit:

http://typekit.com/

You link to the font source file on their servers, via css and @font-face; they promise reliable degradability with css font stacks, along with 100% uptime and blazing speed from their redundant data centers.

They also have a good selection of fonts -- both text and display -- including many from well-known foundries. They have a great test-driver, and screen shots of the way fonts look on various platforms (I can't believe how consistently sucky IE's font display is. No, wait... I can believe it.)

Its a freemium model, so there's a free basic plan: 25,000 Pageviews/month, Trial (limited) Library access, 1 Website, 2 Fonts per site.

And the paid plans are really affordable, starting at $24.99/yr for 50,000 Pageviews/month, Personal (a little less limited) Library access, 2 Websites, 5 Fonts per site.

Looks like "font" could mean "family" so you may get weights and variants for that price. Unless you're committing some serious font abuse, 5 fonts should be plenty for almost any site.

I'm considering using them for upcoming projects...

Anybody here using them?

oheso · 06-15-2010, 05:22 AM

There's no "No, I'm not" option on your poll.

*Jeff* · 06-15-2010, 06:32 AM

Good point. It appears most are still not doing fancy fonts. It also appears that by the time I considered really doing font replacement, font linking is already here and works for a fuller and cleaner option vs. just a headline replacement.

*DogAndPony* · 06-17-2010, 07:03 PM

I just signed up for the beta over at http://webfonts.fonts.com . They'll have a really big selection, although it looks to me like they're holding back certain popular variants.