font-family not woking on Chrome for Android but works on Chrome for Desktop

Question

I made a web application which includes an .svg file with this code:

<svg id="Layer_1" data-name="Layer 1" viewBox="0 150 2000 625" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      .cls-1 {
        fill: #7f7f7f;
      }

      .cls-2 {
        fill: rgb(241,190,146);
      }
    </style>
    <style>@import url(https://fonts.googleapis.com/css2?family=Amaranth%3Aital%2Cwght%400%2C400%3B0%2C700%3B1%2C400%3B1%2C700&amp;display=swap);</style>
  </defs>
  <g>
    <path class="cls-1" d="m291,314.46s-.06,0-.08.01c.05,0,.08-.01.08-.01Z"/>
    <path class="cls-1" d="m1881.33,583.44h0"/>
  </g>
  <path class="cls-2" d="m1894.1,622.76c38.79-22.52,73.54-46.38,70.95-74.78-1.44-15.79-11.79-25.22-25.01-27.93-.92-.19-1.82-.34-2.71-.47-13.42-1.86-23.58,3.61-30.45,13.24-3.75-10.67-11.74-19.2-24.43-20.95-1.2-.17-2.45-.27-3.73-.31-14.82-.47-26.59,6.24-31.8,18.68-10.68,25.5,13.92,60.21,47.17,92.51Z"/>

  <text font-family='Amaranth' font-size='375px' font-weight='400' font-style='normal' white-space='pre' x="446.55" y="630.407" origin="0.510464 -0.373636">Patients</text>
</svg>

I loaded the 'Amaranth' font-family from google's api in the second <style> element and then used it in the <text> element.

The proper font is showing up on Safari for desktop and mobile, and Chrome for desktop but not Android.

Any help would be greatly appreciated!

Answer 1

The problem was using font-family='Amaranth'. I think this made Chrome search for local font-families. I took that off and now the font works.