2

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

Improve this question

1 Answer 1

Reset to default
2

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)

Improve this answer
5
  • 2
    This is the ideal solution.
    – Brandon McConnell
    Commented Feb 19, 2021 at 21:19
  • If you're using SVG in an image context e.g. via an img tag as the poster is then that SVG file cannot reference external files.
    – Robert Longson
    Commented Feb 19, 2021 at 21:42
  • Yes, I am using SVG via <img> tag. I am using Wordpress, then the svg is added via <img>
    – JoseFranc
    Commented Feb 19, 2021 at 21:55
  • Why don't you use the SVG via <object> tag and set the type as in the example: <object data="~/yourPathHere.svg" type="image/svg+xml"></object>
    – E.Tabaku
    Commented Feb 19, 2021 at 22:03
  • When I include the svg in wordpress, it is automatically displayed in an <img> tag. That's what it shows when inspecting the item ...
    – JoseFranc
    Commented Feb 19, 2021 at 22:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.