Need help with Puppetter in a Nextjs application for PDF generation.

Hey,

I am building an application in Nextjs and using Puppeteer in the backend to download the pdf. The component I have built which needs to be downloaded in the form of a a pdf contains some fonts. The fonts are fairly visible on the browser but when downloaded it does not work.
The font's does not show. Please refer to the image I have attached.

In Browser

When downloaded as a PDF.

I would really appreciate the help as I spent the whole day here and got nothing.