We have just finished a wonderful WordPress site at MULTIDOTS. Though it’s not been live yet. The learning or rather would say interesting part of that project is to use a custom fonts on menu. You must be thinking what is interesting in it? Allow me to describe it. Well, as per requirement we had to use a custom font on Menu Navigation for Post Title. The font was “Lettera” that we had to use on post titles. Now challenging part is here. As Post title could by anything almost dynamic. So, creating image for each title and then to use was not going to help. The font is also something which is rare on client machine. Here is the interesting part and something I have written this post for. To overcome this problem our client has suggested us to use Cufon - an online font embedding service. The WOW feature about this service is you can use almost any type of your unique font and style in your web application in case of dynamic text too. You can style any text in any font and it’s hassle free and quite easy too. There is no need to create images for each text. No need to even bother about whether fonts will be installed on viewers machine or not. Let me explain how easy it is
- Load your browser Tab on – http://cufon.shoqolate.com/generate/
- Upload the font you want to use in your website, project or page.
- Choose different options as per your need.
- Save the file on your server and link that JS file on the page where you want to use your custom fonts. If you are going to use it on all the pages put it some where on header file or whatever is common for your site.
- Also link this JS file in your script section – http://cufon.shoqolate.com/js/cufon-yui.js
- That’s it you are done and ready to use. Just follow the instruction on this page on different way you can embed on your page – http://wiki.github.com/sorccu/cufon/usage
You can check out a live sample of what I am talking about. I have used Kety Berry font on sentence below. I am sure this font is not installed in your machine still you can read it better.
I love chocolate!