30
Apr

For a while now if I wanted to use a pretty font on a website and still have it accessible and able to be read by search engines, I would have to turn to sIFR. This is nice enough but it doesn’t always behave like I want it to, and it’s still a little tricky to use. So I’ve tried out cufón on this website. It was quick to set up and very easy to use. Here’s how:

• Head here to upload your font and download cufón.
• Upload the js files to your server and include them on your page
• Use js in the had tag to replace what you need. The following replaces all h1 tags with your font.

<script type="text/javascript">
   Cufon('h1');
</script>

There are lots of custom features you can add, and you can check out the full documentation here. One particular thing that is useful to point out that I encountered was that :hover is switched off by default, so if you plan on using cufón on any <a> tags with :hover attached to them, be sure to turn it on like in the following example

<script type="text/javascript">
   Cufon('a',{hover: true});
</script>

Enjoy!