Use Adobe TypeKit fonts in an SVG object embedded in an HTML page

Question

How can I use fonts from Adobe TypeKit in an SVG object embedded in an HTML page?

I'm able to use web fonts directly (e.g. via a google stylesheet: http://fonts.googleapis.com/css?family=Spicy+Rice), but TypeKit uses a different javascript-based loading strategy which doesn't seem to be applying font availability to the SVG object.

Is this possible, and if so, how can I go about doing this?

Thanks!

Answer 1

SVG is stylable with CSS stylesheets, so you should be able to apply it that way.

And as long as the font is registered on the page, you can use textElToApplyFontTo.attr({ "font-family": "myFont" });

Note that IE<9 will likely have problems, I don't know much about VML font support. IE9+ has SVG support, so it should work with that, and all other modern [desktop] browsers.

One important thing to consider is that Typekit and other JS-based loading mechanisms work asynchronously, so fonts will only be available once they're loaded.

Some modern browsers won't load the font unless a DOM element is using it, so that may also be causing problems (you can try to load the font by using it on a DOM element, preferably above the SVG file. A dirty trick but it works...).