Posts Tagged ‘font’

Dynamic Font Replacement on the Web

Friday, June 11th, 2010
How Cufon works

How Cufon works

I’m currently reading about the Web Typography chapter in the Smashing Book and discovered a new font replacement technique . . . I’ve used most of them in one project or another but haven’t heard of Cufon. Cufon behaves similar to sIFR but instead of using Flash to generate the fonts, it uses a font generator and a renderer (javascript) – it works better than sIFR because it doesn’t use Flash at all and believe me, I’ve used sIFR before and have run into a lot of problems . . . it’s good for small projects but there are just a lot of restrictions and because Flash resizes the fonts accordingly, it’s unpredictable what sizes the replaced fonts will be on any given browser. I like Cufon for the simple fact that I do not have to deal with any of that. Cufon is also speedier than sIFR and is less of a hassle to set up. I’m cutting up a project now and will try it out. Will let you guys know how this one goes.

The other font generation techniques include static image replacement (via CSS) or dynamic image replacement using server based script. Both of these have accessibility issues and should be used with it’s limitations in mind. Another interesting technique is by using @font-face. This is probably the easiest and the only one that is a web standard. The reason why it isn’t widely used is because it’s a fairly new standard (CSS 3) and old browsers do not support it. But it’s probably the best one since the only rendering engine it relies on is the browser itself. Here is how it works:

In your CSS, you include

@font-face { font-family: NewHelvetica; src: url('fonts/NewHelvetica.otf') format("opentype"); } 

and to use it, just declare it in your styling – such as

h1 { font-family:NewHelvetica, Arial, Sans-serif;}

So there you go – Web typography still has a long way to go but it finally seems to be getting there.

[Added 11:41AM PST]
By the way, there is a talk about this on this year’s SXSW’s Interactive – a podcast of this talk is available now thru – Listen to it.
There are also other resources which I will include here:

[Added June 28, 2010 02:41PM PST]
I just also discovered that you can use Google Webfonts as an alternative as well . . . right now, they only have a few fonts that you can use but I’m guesssing that if they gain enough traction with this initiative, they will add more.