I have an svg image on my website but for some reason it doesn't show the correct font type in the Safari browser. In the other browsers it is fine. And for that same problem, the text is cut off. How can I solve that? The SVG is like:
<svg xmlns="http://www.w3.org/2000/svg" width="782.167" height="353.653" viewBox="0 0 782.167 353.653" style=" background: rebeccapurple; ">
<g id="lading-title" transform="translate(-255 -239.623)">
<text id="FIRST_ID" data-name="HERO TITLE" transform="translate(503.537 520.276)" fill="#fff" font-size="45" font-family="Barlow-Black, Barlow" font-weight="800" letter-spacing="0.065em">
<tspan x="0" y="45">MY TEXT HERE</tspan>
</text>
<text id="SECOND_ID" transform="translate(873.167 300.276)" fill="#fff" font-size="45" font-family="Barlow-Black, Barlow" font-weight="800" letter-spacing="0.065em">
<tspan x="0" y="45">TEXT</tspan>
</text>
</g>
On my site I am using it in the following way because it is a site with wordpress:
<img src = "/img/hero-title.svg" class = "vc_single_image-img attachment-full" alt = "" loading = "lazy" height = "353.653" width = "782.167">
I see that in one part of the svg it includes font-family = "Barlow Black" but I don't know why it doesn't work in Safari. I tried adding font-family to it from css with the Id that has that part of the text but it doesn't work