Reports

I had a similar issue. In my case, Japanese fonts were not showing up in screenshots when using @sparticuz/chromium and puppeteer-core. I’m also using Next.js and deploying to Vercel.

I tried solutions like await chromium.font([font file URL]) or loading the font file the way you described, but they didn't work.

Here’s how I solved it:

Place your font file in the project root like this:

(root directory)
- fonts
  - NotoSansJP-Regular.ttf
- src
- public

Add this to your next.config.js to make sure the font is included in the serverless bundle:

const nextConfig = {
  experimental: {
    outputFileTracingIncludes: {
      '**': ['./fonts/**/*']
    }
  }
};

module.exports = nextConfig;

In your code, load the font from the filesystem:

import fs from "fs";
import path from "path";

const fontPath = path.join(process.cwd(), "fonts", "NotoSansJP-Regular.ttf");
chromium.font(fontPath);

const browser = await puppeteerLib.launch({
  args: [...chromium.args, "--no-sandbox", "--disable-setuid-sandbox"],
  defaultViewport: chromium.defaultViewport,
  executablePath: await chromium.executablePath(),
  headless: chromium.headless,
});

I hope it will work. For more details on including files in Vercel functions, see:
👉 How can I use files in Vercel Functions?

79517384