Raphael's `getFont` method doesn't work (?)

Question

I'm having some problems creating text using Raphael.js's print method. To be more precise, the getFont method that the print method requires, returns an undefined value. I put together a very simple fiddle here to try to find the source of the problem, but with no luck so far. The same fiddle code is bellow:

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

And the 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" });​

The canvas is created, even the path is drawn (despite the fact the the value of font is undefined), but the font object is returned undefined. And I've tried with "Arial" font too. After all, these two are standard, so we're not talking about custom fonts.

Any ideas why this happens?

Answer 1

Raphael's print method requires you to use Cufon-font-files. From the docs on getFont:

Finds font object in the registered fonts by given parameters.

and reading further at registerFont:

Adds given font to the registered set of fonts for Raphaël. Should be used as an internal call from within Cufón’s font file.

A little twisted.....

So if you want/need to use the print method you'll have to convert and supply the font files in the correct format, read about cufon here.

If you want to use system fonts (or webfonts) you can use the Paper.text() method that is pretty easy to use and you can style your text with CSS and the likes.