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.
