Cufon is great for embedding fonts into websites that are readable by search engines. If you haven’t tried it, definitely take some time to play around with producing a font file, along with their required cufon-yui.js file. All you have to do is check out this link to get started http://cufon.shoqolate.com/generate/ embedding fonts.
However, if you’re at this post..more than likely, you already know how to implement at least the basics of cufon. Don’t forget to take a look at their styling documentation also. You can do some pretty cool things, like add drop shadows and gradients. Remember, search engines will read this all as text, and this makes for great SEO by being able to wrap the rendered text in H1 text, etc.
This post already assumes you have functional jQuery tabs working and just got stuck with your hover state, or whatever CSS property, not refreshing properly. Let’s say you used the following code to render your text (adding the slick drop shadow effect):
Cufon.replace('#your-tab-id',{hover: 'true',textShadow: '#000 0px 1px'}); |
If you read the cufon API documentation, you might notice that it offers a function Cufon.refresh(); and describes exactly what is needed to get the tabs to properly refresh, but the documentation really doesn’t do a good job in a live example. Now, if you go to the documentation on jQuery for the tabs…you will see that you can apply a show event to make the magic happen.
The final code to get cufon working with jQuery tabs is:
$(function() { $('#tabs').tabs({ show: function() { Cufon.refresh('#your-tab-id'); } }); }); |
The show event will be called after the tab is selected. Obviously, you have multiple tabs. In that case, just call the refresh function for each tab as many times as you need in the show event. Here’s to hoping this saves you many hours of coding to get these awesome features working together properly!