Raphael's `getFont` method doesn't work (?)
javascript, raphael, svg
Solution
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.
Problem
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?