Techie Too!

Fonts with FontJazz

FontJazz is a new JavaScript method to allow the use of different typefaces on websites. The type is rendered in the browser and not server-side. It’s very easy to use. You upload your font, input the font color, font size, and the background color, and FontJazz generates a gif file of your font and 2 JavaScript files for download. Because the background color is required, it works best on a plain background color. As you can see from this blog title, with the right background color mat, it can also work with more complex backgrounds. ( I chose a mid-orange color that mixes with my background.) This font is Diavlo Heavy from exljbris Font Foundry.

The method for using it is described well on this page, and the relative paths can be changed to absolute paths for when the font image is stored remotely, as for this blog. The JavaScript strips all the CSS from the title tags, in this case <h1>, so it’s best to put a the padding and margins in a <div> containing the title. Here’s the markup:

The css:

h1 {
font: bold 56px 'Lucida Grande', sans-serif;
color: #000;
}
div#h1 {padding: 40px 0 10px 0;}

The HTML:

<div id="h1"><a href="/"><h1>{Title}</h1></a></div>

If JavaScript is turned off in the browser, then the font specified for h1 will appear instead. If the title is a link, the <a> tags need to be on the outside of the <h1> tags or you will get “null” nicely written in your font instead of your title! I haven’t figured out how to make a :hover state yet.

It is also easy to change the mat color in an image editor without using FontJazz to render the image again.

It works great until @font-face: can use remote fonts with Firefox.

Edit on 09/28/09: This site now uses CSS3 @font-face property.  See Web Fonts.