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