Reports

Thanks for the clarification through the comment.

Since you cannot share the entire code, let's try to be in the same page.

const data = (await request.json()) as ResumeFormData; → I assume this is post data coming from client http request.
The following code launches chromium with the binary.

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

This is the RAW html content that you will pass to the puppeteer page.

<!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">            
          <style>          
            @font-face {
              font-family: 'Noto Sans JP';              
              src: url('file://${process.cwd()}/public/fonts/NotoSansJP-Medium.ttf') format('truetype');
            }
            body {
              font-family: 'Noto Sans JP', sans-serif;
              margin: 0;
              padding: 20mm;
            }
            h1 {
              text-align: center;
              font-size: 24px;
              margin-bottom: 2rem;
            }
            h2 {
              font-size: 20px;
              margin-bottom: 1rem;
              border-bottom: 1px solid #ccc;
              padding-bottom: 0.5rem;
            }            
          </style>
        </head>
        <body>
          <h1>職務経歴書</h1>
          <h1>test</h1>

          <div class="section">
            <h2>基本情報</h2>
            <p>氏名: ${data.basicInfo.lastName} ${data.basicInfo.firstName}</p>
            <p>フリガナ: ${data.basicInfo.lastNameKana} ${
      data.basicInfo.firstNameKana
    }</p>...

I created a simple version since I don't have vercel, but tried to make it the same code as much as possible.

import puppeteer from "puppeteer";

(async () => {
  const document = `
    <!DOCTYPE html>
    <html>
    <head>
      <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
        body { font-family: 'Noto Sans JP', sans-serif; padding: 20px; }
        h1 { color: blue; }
        p { font-size: 14px; }
    </style>
    </head>
    <body>
      <h1>Hello world!</h1>
      <p>This is a PDF generated from raw HTML content.</p>
      <p>こんにちは、世界！</p>
    </body>
    </html>
  `

  puppeteer.launch().then(async browser => {
    let page = await browser.newPage()
    await page.goto('data:text/html;charset=UTF-8,' + document, {waitUntil: 'networkidle0'});
    await page.pdf({
      path: 'print.pdf',
      format: 'A4'
    })
    browser.close()
  });
})();

The following code will generate the following PDF with node index.js command.

The important things to note are the following:

Specify UTF-8.

await page.goto('data:text/html;charset=UTF-8,' + document, {waitUntil: 'networkidle0'});

If I remove the UTF-8, this will be the output.

If you are still experiencing problem, it would be great if you can share the code that you are using to output the PDF. (No need to share your HTML content code)

Regards,

79499484