Can't use custom fonts in <defs>

[eladnava]

Hey guys,
Loving the package, really nifty and easy to use!

Just one hiccup -- is there any chance that PhantomJS doesn't handle custom fonts declared in a <style> attribute within the <defs> section of an SVG?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewPort="0 0 1000 1000">
    <circle cx="230" cy="230" r="230" fill="#E91E63" />
    <text x="230" y="235" alignment-baseline="central" text-anchor="middle" fill="#fff" font-size="275" font-weight="100" font-family="Roboto Thin">X</text>
    <defs>
        <style type="text/css">
        @font-face {
            font-family: "Roboto Thin";
            font-weight: 100;
            font-style: normal;
            src: url("data:application/font-woff;charset=utf-8;base64,d09................GMgABAAAAACes==");
        }
        </style>
    </defs>
</svg>

It seems to ignore the import, although Google Chrome renders the SVG with the font just fine.

Can anyone please shed some light on this behavior?

[domenic]

Yeah, same issue as #18.

[eladnava]

@domenic Here's a crazy workaround -- I installed the font I needed in the Mac OS X Font Book, and then PhantomJS was able to render my text with it just fine! 👍

I did notice that indeed the font-weight property does not work as expected, so I simply disabled all the other ttf files with font-weights that I wanted to avoid, and PhantomJS had no choice but to use the only available font-weight left, the one I wanted it to.

Here's the package I created using svg2png with this workaround:
https://github.com/eladnava/material-letter-icons

[dottodot]

I'm having this problem too. Is there anyway to resolve this as installing the font's isn't an option as the conversion is happening on the server.

[dottodot]

I found that updating to the latest version of phantomjs and installing the fonts on the server resolved this.

[domenic]

Can you provide a complete SVG test file (as a gist perhaps) so I can see if this is fixed in the latest PhantomJS?

[domenic]

Closing since nobody was able to provide a repro I could test and work with; happy to reopen if someone does.

[eladnava]

@domenic Sorry for the late reply, the full SVG test file is provided in the original issue:
#39 (comment)

Would you like the full font base64 as well?

[domenic]

Yes, I need something I can actually run through svg2png :)

[eladnava]

Here it is:
https://gist.github.com/eladnava/0c16c27fe46d5fe3dd9a40bebd28f78c

Thanks!

[eladnava]

@domenic cool, thanks!