sad cow

web design, jQuery plugins, web tools and general stuff about the internet by matt squirrell.
not exactly unique but hopefully better...

RSS Feed

Using JS for custom-font titles

I wrote a post a little while ago about using custom font titles on a webpage with PHP-generated images.

It's still a handy thing to know about, and teaches some good GD basics. However - it's harder than this way, which uses a very clever service called .

Basically, you upload a font to the Cufon website, and it gives you a javascript file. Include that file onto your website, and you can use the font where you like. Here's how I did it for my site.

First, go to the Cufon website, and click on 'download'. Save the resulting Javascript onto your website.

Now go back to the Cufon home page and browse to the font you'd like to use under "regular typeface" (you probably won't have permissions to get to your c:\windows\fonts folder via a browser, so copy the font to your desktop first, or something). Fill in the other sections as desired (although you be wise to leave most of them (except for the security one) alone) and smack the "Let's do this!" button. Cufon will spit out some Javascript.

You can either put this file on your web-browser too, or do what I did and copy/paste the code into the bottom of the cufon-yui.js file you downloaded earlier. You can do this with as many fonts as you like.

Once that's done, add the following code to the end of the cufon-yui.js file:
                        Cufon.replace('h1', { fontFamily: 'Vegur' });

Cufon.replace('h2', { fontFamily: 'Myriad Pro' });

Cufon.now();
Of course, you should change the name of the font from Vegur and Myriad Pro to whatever fonts you chose. You can also choose different headers (ie. h4), and if you have jQuery or MooTools or the like you can also use CSS selectors, like 
Cufon.replace('.title_font', { fontFamily: 'Vegur' });
Now, on your HTML page, put the following code right before your closing body tag (although it can come before other things than have to be at the end, like Google Analytics code:
<script type="text/javascript" src="path/to/cufon-yui.js"></script>

And there you have it - any of the HTML tags you specified earlier will be replaced with the font you chose.

It does have some downsides - it requires your page to be UTF-8 encoded, and have a strict doctype. Which you should have anyway, etc, blah blah.

jQuery / CSS Clock
Alarm Clock Download
:(

I am Matt Squirrell.

And this is the sort of thing I do.

I can design and build rich, feature-filled websites like this one. Ask me nicely and I might even do it with less than 700KB of images.

I started this website because I'm constantly coming up with neat little fixes, chunks of code, plugins or tricks, and then forgetting about them in a week. This is as much for me as it is for you (but it certainly is nice to share bits and pieces with other people).

It will also serve as a central point for all the other things I have done that have found their way to the Internet - from strange MMO God-sims to a 'Choose your own adventure' maker.

You are more than welcome to hire me if you've got your own web project you want to do - if you can think it I can pretty much make it. I'm cheaper than paying someone from the bargain basement to do it and then having to pay someone good to fix all the problems, too!

Anyway, until I think of a better way to sign off, I only hope you found something useful up there above ground.

Click on the cow ;o)

Contact me. If you like.

Valid XHTML 1.1