Font-face, Raphael and IE8

Question

I am desesperatly trying to get some google font faces to work with Raphael (SVG / VML rendering JavaScript library) on IE8.

At first i tried the google fonts code.

My second try has been to download and convert the fonts to host my own more complete css. Now the fonts show in the html part of the page (inside a modified bootstrap nav dropdown), but it does not work in the VML canvas (generated by Raphael).

Example here :

http://beta.yetiprint.com/fr/etiquettes-autocollantes/4-etiquettes-couleur-ronde.html

Is it possible to get that working in iE8? Any clue?

Answer 1

I can confirm that ScottS’s method works, but I could not fit these instructions in his answer’s comment field.

Instructions for getting custom fonts to work in Raphael by using Cufón:

1. Go to the Cufón website where you can convert a font to path shapes.
2. Upload your custom font, choose a font name, and click the Raphael icon at “Customization for 3rd-party scripts”.
3. Submit the form and download the Javascript file that pops up.
4. Include this Javascript below the Raphael Javascript include.
5. Register the font with Raphael like this, where fontname is the name of your font that you specified in step 2: var myfont = paper.getFont('fontname');
6. Use your font like this in Raphael: paper.print(100, 100, 'Hello World', myfont, 100);

Performance is not great compared to Paper.text, but it works in IE6 and up.

Answer 2

Have you tried the procedures in Raphael to registerFont()? See http://raphaeljs.com/reference.html#Raphael.registerFont. That gives the procedure for getting the font into Raphael.

Based off the link in that page, you should be able to get VML support and thus IE8 functionality. At least theoretically; I've never done it, I just found this information which seems to point in the direction you want to go.