Using cufon with CSS generated content via (:before/:after)

Question

I'm trying to add a '/' character to decorate an "h1" with the following CSS:

.h1:after {
    content: "/";
    color: #FFC502;
    font-family: 'Neo Sans Pro Medium',verdana,arial,sans-serif;
    font-weight: bold;
}

I'm also using CUFON font replacement for all "h1" using the following script:

$(document).ready(function () {
    cufon();
});

function cufon() {
    Cufon.replace('h1:not(.noCufon)');
    Cufon.replace('h2');
    Cufon.now();
}

The h1 is correctly replaced with the neo sans font by cufon, but the generated content isn't. The last '/' will render in Verdana no matter what I do. Is there a way to make cufon to recognize and replace the CSS generated content?

Answer 1

As a JavaScript library, Cufón doesn't support CSS generated content, because it is not accessible through the DOM. There is no way to make it recognize and perform font replacement on generated content.

Answer 2

I hate cufon many developers are moving to google webfonts as it is much easier to manage and does not contain as many bugs as the cufon system.

http://www.google.com/webfonts

for example you just include the font like so

<link href='http://fonts.googleapis.com/css?family=Skranji' rel='stylesheet' type='text/css'>

<style>
body{ font-family: 'Skranji',verdana,arial,sans-serif }

Of course you would have to look for your desired font.