Unable to make text bold in SVG

I have something like this:


.speed-description {
font-size: calculate-rem(9px);
}

<svg #speedAnimation class="{{ speedAnimationClass }}" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet">
<path class="loader" d="m 0 120 a 1 1 0 0 1 120 0" fill="none" stroke-linecap="round" stroke-width="11" />
<text text-anchor="middle" x="60" y="110" font-weight="900" ></text>
<text text-anchor="middle" x="60" y="120" font-weight="bold" class="speed-description">
{{ speedDescription }}
</text>
</svg>

Whatever I try I cannot make the 2 texts in bold. What am I doing wrong?

Currently it's something like this



Continue reading...