Custom fonts on your blog

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 tag.

<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'/>

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 tag.

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 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.