Including fonts when converting SVG to PNG

Question

I am trying to generate some SVG and allow users of my website to download these SVGs as PNGs.
After reading this I get all my external images included in the downloaded PNG.
Now I am trying to get the fonts on the PNG correct. This seems to answer that and so I added:

<defs>
    <style type="text/css">
        @font-face {
            font-family: Parisienne;
            src: url('data:application/font-woff;charset=utf-8;base64,.....')
        }
    </style>
</defs>

Where ..... is base64 encoded woff2 font. And then used it in text like so:

<text x="55" y="55" stroke="red" font-family="Parisienne">Blah</text>

The font gets displayed in the browser correctly (I haven't installed it on my OS), however it is still not included in the PNG.
Do I have to add some additional processing to the script I used from the first link?
Thanks.

--EDIT--
I have been asked for a complete example, here it is:

<svg id="generated-svg" class="generated-svg" width="300px" height="500px"
    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style type="text/css">
      @font-face {
        font-family: Parisienne;
        src: url('data:application/font-woff;charset=utf-8;base64,.....')
      }
    </style>
  </defs>

  <rect width="300" height="500" fill="#222"/>
  <text x="55" y="55" stroke="red" font-family="Parisienne" font-size="20px">Test text</text>
</svg>

I haven't added the base64 encoded font as it's simply too big. But you can encode any font you like and replace the ....... I am using Parisienne.
Here is working jsfiddle with the actual font: https://jsfiddle.net/z8539err/ In my browser this is the output:

Whilst after using the download script above I would end up with:

Cufic

"The font gets displayed on SVG correctly" – do you also have this font installed on your system? If you do, de-install it and check if it still works. That may rule out a few causes. – Hyozo

I haven't installed it on my system – Cufic

I have added an example – Cufic

Apologies for keeping asking questions – how do you exactly construct your HTML file? There seem to be different ways – and I get a fully blank PNG with some, no text at all. That makes your problem not quite locally reproducible ... – Hyozo

Not sure what you mean by "how i construct my html". Like everyone else? But here is jsfiddle for your convenience: jsfiddle.net/z8539err – Cufic

Hello! Could you please share the code for downloading the picture as well? In your example there is merely the process of drawing depicted. As for the link you posted, it seems to keep the right font in its PNG picture for me. So, I presume you have made some alterations to that algorithm which also ought to be shown here. – Bulgarian

This is my download script: jsfiddle.net/hutvL4ks/2 . It seems to work ok in jsfiddle. This gave me a hint - the only difference between the two was that on my website the base64 encoded font had new-line characters (was saved in a separate file with new lines included). I removed the new-lines and everything runs great. – Cufic

Answer 1

I'm able to include the font in the png itself with the following code, give it a try

var svg = document.getElementById('generated-svg');
var svgData = new XMLSerializer().serializeToString( svg );

var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 500;
var ctx = canvas.getContext("2d");

//display image
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );


img.onload = function() {
ctx.drawImage( img, 0, 0 );

//image link
console.log( canvas.toDataURL( "image/png" ) );


//open image 
window.location.href=canvas.toDataURL( "image/png" );
};

https://jsfiddle.net/user3839189/hutvL4ks/1/

Potential

This is my download script: jsfiddle.net/hutvL4ks/2 . It seems to work ok in jsfiddle. This gave me a hint - the only difference between the two was that on my website the base64 encoded font had new-line characters (was saved in a separate file with new lines). I removed the new-lines and everything runs great. – Cufic

Answer 2

A working proof of concept project on GitHub to address OP problem statement.

https://github.com/nirus/SVG-PNG-Convert

Built generic Javascript module that can be modified and used anywhere. Read the documentation. Give it a try!

Determiner