Raphael `getFont` method not working (?)

Question

I'm having trouble creating text using the Raphael.js print method. More precisely, the getFont method, which requires the print method, returns undefined . I put together a very simple script here to try to find the source of the problem, but so far no luck. The same script code is given below:

 <div id="canvas" style="width:500px; height:300px; outline: 1px solid #000;"></div>​ 

And JavaScript:

 var canvas, font, text; canvas = new Raphael(document.getElementById("canvas", 500, 300)); font = canvas.getFont("Arial"); text = canvas.print(0, 0, "Some text", font, 24).attr({ "fill": "#C00" });​ 

A canvas is created, even the path is drawn (despite the font value being undefined), but the font object is undefined. And I also tried the font "Arial". After all, these two are standard, so we are not talking about custom fonts.

Any ideas why this is happening?

Answer 1

The Raphael print method requires the use of Cufon-font files. From the getFont :

Finds the font object in registered fonts by the specified parameters.

and then read registerFont :

Adds the specified font to the registered font set for Raphaël. It should be used as an internal call from the Cufóns font file.

A little twisted .....

So, if you want / should use the print method, you will have to convert and deliver the font files in the correct format, read about cufon here .

If you want to use system fonts (or websites), you can use the Paper.text() method, which is pretty easy to use and you can style your text using CSS, etc.