A really nice feature for improving even more your blog is to show custom fonts, that will not only make your website eye-candy, but will improve the typography of your webdesign.
I have found a really nice script for font replacement called Cufón. It allows us to use any font on our webdesign without worrying about whether the visitor will have that font on his computer or not. It is really fast, easy to use, and there is no flash or image required.
Step 1 – Preparation
To have cufón installed on your blog you’ll only need 3 things: jQuery Library , Cufón JavaScript and a free font. The reason why you need a free font file is to make sure that you’ll have permission to use that font for web embedding without worrying about license or copyright stuff. You can find a great selection of free fonts here, I recommend you to go for the “Sans Serif” ones, they look great, stay away from the fancy ones, they will only make your blog look terrible
Step 2 – Installing Cufon
Once you have your font file, you are ready to install cufón on your blog. To do that just paste the following code right before your </head> tag.
<!-- Cufon + jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://bloggertuts.googlecode.com/files/cufon-yui.js' type='text/javascript'/>
<!-- End of Cufon + jQuery -->
Step 4 – Generating your font
Now it’s time to generate the script for your custom font that will be used together with Cufón in order to replace the general fonts at your blog.
Just download your font (make sure it’s a free one) and head to the Cufón font generator, you will get something like this:
On Regular typeface, submit your font file, if you would like to use its bold and italic version just do the same on the boxes below it. Also make sure you check the The EULAs of these fonts allow Web Embedding (without Adobe Flash) option, otherwise it will not work
On this step, you can check the boxes as you wish, but I recommend you to leave it the same as the picture above in order to get a reasonable file size.
On Security, type your blog’s address, this is a great feature, and will keep your font files working only at your blog, what is a great feature to prevent copies.
Just leave the rest as it is, make sure you check the I acknowledge and accept these terms box, and click Let’s do This!
Step 5 – Using Cufon
Now that you have generated your font script, you’ll need to host it somewhere. There are many free file hosting services around, I recommend using Dropbox, it is pretty much the best I’ve ever seen for hosting JavaScript files for free.
Once you have your font hosted, get the public link to the file and save it somewhere. To replace the fonts you should paste the following code, right befor your </head> tag.
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('.post h3');
</script>
Remember to replace Vegur_300.font.js for your font’s URL, and .post h3 for the element you want to be applied.
Step 6 – Internet Explorer Fix
To make sure everything goes well, place this code right before your </body> tag.
<script type="text/javascript">Cufon.now();</script>
Final Words
That’s it, now you have a nice way to implement custom fonts at your blogs, improve your typography and make it beautiful.
If you would like more information or help about Cufón, just head to its website. Feel free to contact us if you found problems using this tutorial, also don’t hesitate to show of your results on the comments below.
Note: There is a fix for Cufon flash of unstyled content here. Thanks Choen