CODEWITHSUNDEEP
htmlcsswordpresssvg
JoseFranc
JoseFranc

Reputation: 213

SVG image doesn't show correct font in Safari

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="&#10;    background: rebeccapurple;&#10;">
<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

Upvotes: 2

Views: 1720

Answers (1)

E.Tabaku
E.Tabaku

Reputation: 124

Have you tried to insert the font family inside the style tag in the .svg file, as:

@font-face {
    font-family: 'Barlow-Black';
    src: url('../Fonts/barlow-black.ttf');
    }

You can download the font for free and add the font to your solution as a .ttf file. [https://fonts2u.com/barlow-black.font] (The src property has the path of the font in your solution)

Upvotes: 2

Related Questions