How to use Google Fonts with Canvg using @import?

[tomsoderlund]

Is @import or style not supported?

With the style tag below, Canvg just renders white. Removing the style tag renders an image.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1200px" height="628px" viewBox="0 0 1200 628" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="gradientPurpleBlue">
      <stop stop-color="#A06AFC" offset="0%"></stop>
      <stop stop-color="#6CDFD2" offset="100%"></stop>
    </linearGradient>
    <style type="text/css">
      @import url("https://fonts.googleapis.com/css?family=Roboto:400&display=swap");
    </style>
  </defs>
  <rect id="gradient-blue" fill="url(#gradientPurpleBlue)" x="0" y="0" width="100%" height="100%"></rect>
</svg>

[gabelerner]

Something like https://canvg.github.io/canvg/demo/index.html?svg=../svgs/36.svg will work
use @font-face with src: url(...). Let me know if that's enough!

[gabelerner]

@tomsoderlund let us know if that worked for you.

@dangreen should we add this to roadmap or mark it as won't do - I really only want to implement basic css with this project, don't want it becoming both svg and css. What are your thoughts?

[dangreen]

@gabelerner @tomsoderlund Here problem is canvg doesn't support @import. I can make fix to just ignore this statement. And I think we shouldn't implement full @import support. Maybe yet.

[dangreen]

@tomsoderlund Hi! Before release you can test fix on demo page: https://canvg.github.io/canvg/demo/index.html?url=../svgs/issue908.svg

[dangreen]

@tomsoderlund canvg@3.0.6 was released

[tomsoderlund]

@dangreen Awesome, thank you! Close this?