Home Notes Web design Cufon

Cufon E-mail
Monday, 25 May 2009 09:51

I decided to try Cufon to prettify the title in my blog header.  It went from:

Before

to:

After

The font I chose is called Ginga.  I used a WordPress plugin to incorporate Cufon into my blog.  By default the modified title didn't display in the same position as before, so I had to restyle it using CSS (and as usual IE required its own values different than other browsers, which I implemented via ).

Another modification was required, which was to set visibility: hidden in the theme's CSS file, and add the following into the header.php file of my theme (jQuery is already being used elsewhere, so it's loaded anyway):

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('h1#blog-title').css('visibility', 'visible');
});
</script>

What this does is hide the title before Cufon is done applying its effects to it, because otherwise the original title (in the original font) is displayed in large letters in the middle of the blog because of the placement modifications (via CSS) the Cufon replacement title required.



Tags: Cufon  plugin  JavaScript  CSS  blog  Ginga  font  WordPress  jQuery  IE  code