SVG text element with @font-face family renders with incorrect font

[sgmccli]

Please follow the general troubleshooting steps first:

• You are using the latest version
• You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

When a font-face is defined in CSS and applied to an SVG text element it renders correctly within the browser but is ignored by html2canvas when creating an image. This is demonstrated in the following fiddle.

https://jsfiddle.net/y937mxnv/

Specifications:

• html2canvas version tested with: 1.0.0-alpha-12
• Browser & version: Chrome Version 70.0.3538.102
• Operating system: OSX Mojave 10.14

[onEnterFrame]

+1

[iantrudell]

Also having this issue

[maximgeerinck]

Submitted a pull request, to bypass this for now you can use the following:

    function svgToCanvas(targetElem) {
        var svgElem = targetElem.getElementsByTagName("svg");
        for (const node of svgElem) {
          node.setAttribute("font-family", window.getComputedStyle(node, null).getPropertyValue("font-family"));
          node.replaceWith(node);
        }
    }
    svgToCanvas(yourElement);

which you call just before html2canvas(yourElement)

[maximgeerinck]

possible duplicate? #1463

[bakku]

Thanks @maximgeerinck ! Just a small addition, I was using a Google Font and I had to have the font served from the same domain as everything else...getting the font directly from google produced the same output as before even with your solution.