Finding a way to get non-standard fonts into web pages has always been a challenge. A designer will produce a beautiful layout using fonts that they have carefully chosen, then the developer sighs and either just converts it to Arial and hopes no one notices, or chooses a method of font substitution.

Graphics

Cutting up graphics and embedding them as images is time consuming, a nightmare to update and doesn’t allow for dynamic text. It’s the best way to make sure your site looks exactly like the design you’re working from, but don’t let an SEO guy see it.

Flash

I’ve used Flash based font replacement with Sifr in the past. It always felt clunky though, I worry about the overheads of using lots of Flash font replacement on a page and you risk it failing for browsers which don’t support Flash like iPhones.

Javascript

The new families of Javascript based font replacement are really clever. Cufon, for example, lets you upload a font file which it converts into path information which it then uses to draw the fonts using the HTML 5 <canvas> element.

Google love their Javascript apis so its not surprising that they’ve jumped on the bandwagon over at the Google font directory. Google are a bit more concerned about copyright though and so they provide a  small selected of open source fonts rather than allowing you to upload any font.

Let’s have a go at an example:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

<style>
p.tangerine { font-family: 'Tangerine', serif; font-size: 48px; }
</style>

<p class="tangerine">Sandjam goes Tangerine!</p>

Produces:

Sandjam goes tangerine

It works! Thanks Google, now just build up your font collection and I’m in.