Rendering a Font within an Inline SVG inside a Leaflet marker

Question

I am creating a custom marker in a Leaflet Map using a SVG-String. This works fine, however the FontFace which is defined in the SVG-String does not render. Is this at all possible with such a construction? I created a fiddle at https://jsfiddle.net/FiddleHeimer3000/5jmpow36/

And this is the relevant code:

let svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="36" height="36" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve"><style type="text/css">   .circle{fill:#EEEEEE;stroke:#990000;stroke-width:3;stroke-miterlimit:10;}   .count{font-family:"Do Hyeon";font-size:12px;}</style><g id="Layer_2_1_">   <g id="Layer_1-2">      <circle class="circle" cx="16" cy="16" r="14"/> </g></g><text transform="matrix(1 0 0 1 10 20)" class="count">33</text></svg>';
let icon = L.icon({
    iconUrl: encodeURI("data:image/svg+xml," + svg).replace(new RegExp('#', 'g'),'%23'),
    
});
let marker = new L.marker([20, -80],{
    icon: icon
});
marker.addTo(map);

Thanks!