SVG on the web with special fonts

Question

I have an SVG file with some special - although free - fonts used in it, and I'd really like to use them when the svg file is displayed in a browser.

I've tried:

• adding <style> and @font-face elements, pointing to absolute urls, with all the possible web fonts (eot, svg, etc.) inside the <defs></defs> section without success
• adding the data of the svg font format itself inside the document into the <defs></defs> section

but all without success.

Does anyone know a method how to achieve this?

P.S.: Sorry if I'm asking it on the wrong site, I could not decide wether this is a coding or a design question.

---

Edit

I ran into the same problem, despite hours of trying I havent found a solution. You can find the test case here: http://editor.method.ac/font-files/test.html

Test case works in Opera, not in Firefox or Chrome. Haven't tested IE9. Font-face declaration uses just woff format.

Answer 1

<img> files must be entirely self-contained for security reasons, i.e. they can't refer to any external files. In order to get woff fonts to work in images in Firefox, you'll need to encode the woff data as a data URL and embed that in the image. So instead of url(arvo-regular-webfont.woff), you would use url(data:application/octet-stream;base64,'d09GRg...

There's an online encoder here