Google map SVG marker webfont text not rendering correctly

Question

I'm using google maps API, adding a marker to the map, where the marker icon is an SVG created dynamically in my code.

I encode the SVG to the google maps API using this method icon: data:image/svg+xml;base64,${btoa(svg)} similar as what described in this answer.

The SVG consists of a path for the frame and a letter. I render the letter using a <text> element in the SVG. The map does show the icon - but the letter is not rendered in the correct font (PPRightGrotesk).

Here's a jsfiddle showing the problem.

Is there a way to make this work?

My SVG:

<svg width="28" height="40" viewBox="0 0 28 40" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M 3.7 0.9 C 1.7 0.9 0 2.5 0 4.6 V 24.9 C 0 27 1.7 28.6 3.7 28.6 H 8.1 C 10.3 32.3 12.7 35 13.4 35 C 14.1 35 16.5 32.3 18.8 28.6 H 24 C 26 28.6 27.7 27 27.7 24.9 V 4.6 C 27.7 2.5 26 0.9 24 0.9 H 3.7 Z"
    fill="#ffd249"
  />
  <style>
    text {
        font-family: 'PPRightGrotesk', monospace;
        font-weight: 900;
    }
  </style>
  <text x="10" y="20" fill="black">X</text>
</svg>