Copyright © 2011 By Chongchen Saelee

There’s only a handful of “websafe” fonts, a collection of fonts that any Internet user’s computer will most likely already have preloaded whether with their operating system or Internet browser. So when a webpage designer is feeling limited with his font selection, he either has to rasterize that custom font into an image or force the user to download the custom font. If the user has to download a custom font, it’s never a gaurantee that it will be compatible as there are many formats of fonts. Even with rasterized fonts as images, depending on how much text needs to be shown, the graphic might get really big and weigh down the downloading speed or drawing performance.

The most efficient method is probably to create a real font using a font editor and hope it works on the user’s end. But font editors cost money, and if you’re not a hardcore typographer, what’s the point of investing in it? So I’m going to attempt to create a “free” solution: implement a simple javascript font system based on a sprite sheet. This is a technique commonly used in game development and I’m sure others out there have done similar thing.

(more…)