My SVG image's font (Paladins) isn't displaying properly on some devices once deployed, it works on localhost - On deployed versions it shows the default text

Note: I have Paladins.ttf in the public directory alongside the SVG file

Any help is much appreciated, thanks!

          <Image 
            src='/manifesto.svg'
            alt='Manifesto'
            width={184}
            height={51}
            layout='responsive'

            
          />

Manifesto.svg

      .cls-3, .cls-4, .cls-2 {
        font-family: Paladins, Paladins;
        font-size: 29.27px;
        text-decoration: underline;
      }