Can't use custom fonts in <defs>
eladnava opened this issue · 10 comments
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 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
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.
I found that updating to the latest version of phantomjs and installing the fonts on the server resolved this.
Can you provide a complete SVG test file (as a gist perhaps) so I can see if this is fixed in the latest PhantomJS?
Closing since nobody was able to provide a repro I could test and work with; happy to reopen if someone does.
@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?
Yes, I need something I can actually run through svg2png :)
Here it is:
https://gist.github.com/eladnava/0c16c27fe46d5fe3dd9a40bebd28f78c
Thanks!