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.
