Use it? Dig it?

Please consider submitting a link to your site, so I can showcase it here!

Please and Thank You:

All donations will go to my wife, kids, two dogs and a bunnyrabbit, who sacrifice their time with me so I can write crazy code for you.

How does it work?

Don't worry, it's easy!

Of course, if you haven't already, you need to generate your JavaScript and font image files, and download the script.

Let's look at a sample webpage:

<html>
 <head>
  <title>Neato!</title>
  <script type="text/javascript" src="fontjazz.js"></script>
  <script type="text/javascript" src="font.js"></script>
 </head>
 <body>
  <h1>Wow! Fancy headlines!</h1>
  <p>Gotta love it!</p>
  <script type="text/javascript">
   FontJazz.apply("h1", "font");
  </script>
 </body>
</html>

The two <script> tags in the <head> of the document link to the fontjazz script (fontjazz.js), and the generated metrics for your font (font.js).

Inside the body of your document, you use regular <h1> tags for your headlines, as usual.

The <script> tag just before the </body> tag contains the JavaScript statement that activates FontJazz and inspires it to replace your dull-as-dishwater <h1> tags and make them sparkle with beauty and grace:

FontJazz.apply("h1", "font");

"h1", obviously, is the tag we're replacing, and "font" refers to the name of your registered FontJazz typeface.

Hey, when did that happen? I hear you ask. Well...

Under the Hood

Let's take a peek inside your generated "font.js" file, the second file we embedded in the <head> tag:


FontJazz.register('font', {
  image: 'font.gif',
  width: 1142,
  height: 74,
  'A': [0, 19, 1, 21],
  'B': [20, 18, 1, 19],
  'C': [39, 16, 1, 18],
  ...
});

The generated JavaScript registers the font, cleverly named "font", for use with FontJazz. We can then apply that font to, for example, the <h1> tags.

Troubleshooting

If it doesn't work, you probably need to check your paths:

Make sure the <script> tags in your <head> are pointing to where you placed the "fontjazz.js" and your generated "font.js" file.
Check inside your generated "font.js" file, and make sure the "image" path points to wherever you placed your generated "font.gif" file.

What if I want more than one font?

Nothing simpler!

To add another headline type, generate another font, and do a couple of edits:

Preferably, copy the contents of your generated font-metrics files (font.js) into a single file.
Rename your generated image files, and edit the font-name and "image" paths for each font.
Add more FontJazz.apply() statements, replacing your <h2> ... <h6> tags with your added fonts.

Hint: Condensing the JavaScript files into a single file, is an easy optimization - put the contents of "fontjazz.js" first, then your FontJazz.register() statements.

Joy!

If you love it, clap your hands!

(and tell your friends)

Questions?

Please try the FAQ page - or if that doesn't answer your question, use the contact form.