html2canvas svg textPath Custom font family not rendering in firefox

Question

HTML:

<svg>
<path id="text2" d="M156.56,461.68c-38.49-66.82-41.3-151.76,.03-223.35,41.33-71.58,116.3-111.63,193.41-111.7"></path>
    <text><textPath href="#text2" startOffset="50%" >Here is example text</textPath></text>
</svg>

CSS:

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/customfont.woff') format('woff')
}
svg * {
 font-family: 'CustomFont';
}

JS:

html2canvas(targetElement, {
           backgroundColor:null
        })
        .then((canvas) => {
           const base64image = canvas.toDataURL('image/png');
           let anchor = document.createElement('a');
           anchor.setAttribute('href', base64image);
           anchor.setAttribute('download', 'testdownload.png');
           anchor.click();
           anchor.remove();    
        })

I try to text on svg path and download it as png with html2canvas. I have customfont. Chrome and safari render the fonts correctly. So that i can get the result png how i want.

But it's not working in fireFox. Firefox doesn't render any customfont. Firefox renders the font,

• if i use font-family: Arial; which is intrinsic.
• if the text not in svg. (it means, it renders if text is in others: div, span, p etc.)

What am i missing here now for firefox?