Failed to load dynamic font for ₹ . Error: [Error: Failed to load font]

[captainjackrana]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Node.js v18.15.0

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 18.7.0: Tue Aug 20 16:57:14 PDT 2019; root:xnu-4903.271.2~2/RELEASE_X86_64
    Binaries:
      Node: 18.15.0
      npm: N/A
      Yarn: N/A
      pnpm: 8.5.1
    Relevant packages:
      next: 13.2.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which example does this report relate to?

vercel-og-nextjs

What browser are you using? (if relevant)

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Some special characters like ₹ symbol are not loading in the dynamic title example shown.

Running it locally shows the following error

Failed to load dynamic font for ₹ . Error: [Error: Failed to load font]

Expected Behavior

The image should render the special character properly along with others

To Reproduce

1. Run the vercel-og-nextjs example with pnpm i pnpm dev

2. Hit the param example url with the title query parameter containing the rupee symbol http://localhost:3000/api/param?title=Rupee%20%E2%82%B9

[Jackie1210]

@captainjackrana It seems like that it render correctly in satori playground

[captainjackrana]

@Jackie1210 did you try running it locally to reproduce the problem?

[Jackie1210]

@Jackie1210 did you try running it locally to reproduce the problem?

nope，I didn't find a explicit link to reproduce it according your issue

[BryanAM]

Verified on playground. This character doesn't work ❀

playground

[mcnaveen]

This seems to be working now in the playground!

[maxijonson]

I had a similar issue and fixed it. Make sure you're not displaying zero-width characters, commonly found in preview deployments with stega encoded data from a CMS like Sanity.

In my situation, I had the bug only on preview deployments, because Sanity's "stega" option was enabled on preview deployments by default. Stega adds zero-width encoded characters for draft mode and since I was rendering a blog post's title in my image, the font would fail to load it.