Search code examples
csscufon

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

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?

Solution

  • 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.