Thursday, May 28, 2009

FontJazz embeds non-standard fonts on web pages

Typography for web pages is very limited. There are thousands and thousands of beautiful fonts, but when it comes to designing a web page we are forced to choose from only half a dozen stinking old ones. To over come this constraint, designers have been using images, but images has it’s disadvantage – they cannot be read by search engine crawlers.

For those who are looking to spice up their pages with a variety of fonts, FontJazz offers the best SEO friendly solution.

FontJazz is a tiny typographic engine written in JavaScript, that enables web designers and developers to use any typeface on a website. It still uses images to display the typeface but unlike pre-generated headers images, the image in FontJazz is generated on the client machine. The designer uses regular <h1> and <h2> tags and texts for headlines, which gets rendered into a rich typeface by  FontJazz’s font rendering engine. 


To use FontJazz you have to first generate a FontJazz JavaScript file and an image file for that font which is possible by uploading a TrueType or OpenType font from your machine to FontJazz. Then by calling the FontJazz function on your pages, you can magically transform the text to the desired font. If the client machine has Javascript disabled, the text is displayed in the default typefaces.

FontJazz has two distinct advantage over using images.

1. Because the font transformation happens on the client side, you don’t have to generate an images for each headline. Just a single image does the job, keeping bandwidth overheads at minimum.

2. A search engine crawler sees a simple <h1> tag with an index-able headline instead of header-image.jpg, which is precisely what we always want.

FontJazz works with IE5+, Firefox 2+, Opera 9+, Google Chrome and most likely any other standards-compliant browser.

[via Smashing Apps]


Post a Comment

Popular Posts