JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="800px" height="800px">
    <text id="p" x="40" y="1em">pḾ‘</text>
</svg>

Notice how the M is rendered with a different font compared to the p.

CSS

svg, text { font-size: 300px; font-style: italic; font-family: "Times New Roman"; }

JavaScript

var b = document.getElementById("p").getBBox();
var r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
r.x.baseVal.value = b.x;
r.y.baseVal.value = b.y;
r.width.baseVal.value = b.width;
r.height.baseVal.value = b.height;
r.style.fill="none";
r.style.stroke="red";
document.getElementsByTagName("svg")[0].appendChild(r);