Manrope rendering issue

[jacobleech]

Hey there. I'm trying to use Manrope with this package, setup script as below:

const GetGoogleFonts = require('get-google-fonts');

const fonts = async () => {
  // Setup of the library instance by setting where we want
  // the output to go. CSS is relative to output font directory
  const instance = new GetGoogleFonts({
    outputDir: './dist/fonts',
    cssFile: './fonts.css'
  });

  // Grabs fonts and CSS from google and puts in the dist folder
  const result = await instance.download(
    'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&family=UnifrakturCook:wght@700'
  );

  return result;
};

module.exports = fonts;

Unfortunately there are weird gaps in the font when rendering on the FE.

If I replace the link to font.css in

with the direct Google fonts URL, the font renders as expected.

I've attached two images for comparison.. Any idea what might be going on?

Cheers.