Translate It!

    Translate to:

Print This Post Print This Post

Testing Cufon Fonts in WordPress

I was looking for a (simple) way of decorating some of my headings with fancy fonts, without having to embed these with WEFT or TrueDoc. I tried FontJazz, and although I can get this to work in a simple html page, using it with WordPress is beyond me.

My latest attempt is with Cufon, and this page demonstrates its use to sub-class H1 with 3 different fonts.

The first was Anastasia, which I uploaded to the Cufon convertor and then installed the resultant js file in my wp-content/plugins/fonts directory, whilst the second is the example Vegur font installed with the WP Cufon plugin, and another I uploaded for conversion: BernhardFashion BT. As you can see in my code, I’ve sub-classed h1 thrice, once for each font.

This is h1 class=cufon_anastasia

This is h1 class=cufon_vegur

This is h1 class=cufon_bernhard_fashion_bt

This is Ordinary h1 (without being sub-classed)

The following is the html on this page:

<h1 class="cufon_anastasia">This is h1 class=cufon_anastasia</h1>
<h1 class="cufon_vegur">This is h1 class=cufon_vegur</h1>
<h1 class="cufon_bernhard_fashion_bt">This is h1 class=cufon_bernhard_fashion_bt</h1>

<h1>This is Ordinary h1 (without being sub-classed)</h1>

The code in the Cufon Administration setting box is as follows:

Cufon.replace('h1.cufon_anastasia', { fontFamily: 'Anastasia' });
Cufon.replace('h1.cufon_vegur', { fontFamily: 'Vegur' });
Cufon.replace('h1.cufon_bernhard_fashion_bt', { fontFamily: 'BernhardFashion BT' });

Cufon is a neat solution requiring very little effort to implement for headings.
(see an earlier post: My Font Baptism for previous thoughts on the use of fancy fonts.)

JWBD4 7th Sep 2009

Copy the code below to your web site.
  • Share/Bookmark

Comments are closed.