[SOLVED] Why text inside an svg logo with google fonts not rendered properly on a webpage?

Why text inside an svg logo with google fonts not rendered properly on a webpage?

I am trying to design a simple logo for my webpage using text in an SVG file and for the text I am using google fonts.

Here is my SVG file:

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="56" viewBox="0 0 240 56">
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Titan+One");
  </style>

  <text fill="#fac31e" font-size="3em" font-family="Titan One" x="1" y="45">
        MyLogo
    </text>
</svg>

When I save the file and click on it on my Mac computer, the image opens, and I see the word MyLogo is rendered correctly with font Titan One.

However, when I add it to my website using:

<img class="logo" style="font-family: Titan One" src="/img/my-logo.svg" alt="My Logo" width="140" height="120">

It shows the text MyLogo, but it is rendered with a different font. What am I doing wrong?

Thanks for your help.

Solution

You can use <object> instead of <img>. Here's the code:

<object data="/img/my-logo.svg" type="image/svg+xml" alt="My Logo" width="140" height="120">