Repository: next.js
Issue: "Unsupported OpenType signature wOF2" when loading Inter in opengraph-image
Labels: bug,Font (next/font)

### Link to the code that reproduces this issue

[codesandbox](https://codesandbox.io/p/devbox/thirsty-khorana-ngwxcw?file=%2Fapp%2Fopengraph-image.tsx%3A58%2C37&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clugotn5w00073b6krsz264em%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clugotn5v00023b6kjsmdgje4%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clugotn5v00043b6kokxh3jt7%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clugotn5v00063b6k97xqbwo4%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clugotn5v00023b6kjsmdgje4%2522%253A%257B%2522id%2522%253A%2522clugotn5v00023b6kjsmdgje4%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clugov7es00bt3b6l47b3zlop%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A58%252C%2522startColumn%2522%253A37%252C%2522endLineNumber%2522%253A58%252C%2522endColumn%2522%253A37%257D%255D%252C%2522filepath%2522%253A%2522%252Fapp%252Fopengraph-image.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clugov7es00bt3b6l47b3zlop%2522%257D%252C%2522clugotn5v00063b6k97xqbwo4%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clugotn5v00053b6ko0w8b115%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clugotn5v00063b6k97xqbwo4%2522%252C%2522activeTabId%2522%253A%2522clugotn5v00053b6ko0w8b115%2522%257D%252C%2522clugotn5v00043b6kokxh3jt7%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clugotn5v00033b6kaky2qcr0%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clugotn5v00043b6kokxh3jt7%2522%252C%2522activeTabId%2522%253A%2522clugotn5v00033b6kaky2qcr0%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

### To Reproduce

1. Follow the example in https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image
2. Load Inter v4 WOFF2 file from rsms.me or github - latest release (ttf doesn't work either so trying to use woff2)



### Current vs. Expected behavior

The example gives a ttf file but opentype supports woff2 and it's also the default for the web so it should work.

This also works fine with Inter v3 .woff files but not .woff2 - if woff2 is not supported, this will be worth mentioning in the docs because the error message product by this issue is somehow a very low-level stack trace with no actionable information:

```
 ⨯ Error: failed to pipe response
    at pipeToNodeResponse (/Users/southclaws/work/site/node_modules/next/dist/server/pipe-readable.js:126:15)
    at async DevServer.runEdgeFunction (/Users/southclaws/work/site/node_modules/next/dist/server/next-server.js:1224:13)
    at async NextNodeServer.handleCatchallRenderRequest (/Users/southclaws/work/site/node_modules/next/dist/server/next-server.js:248:37)
    at async DevServer.handleRequestImpl (/Users/southclaws/work/site/node_modules/next/dist/server/base-server.js:807:17)
    at async /Users/southclaws/work/site/node_modules/next/dist/server/dev/next-dev-server.js:339:20
    at async Span.traceAsyncFn (/Users/southclaws/work/site/node_modules/next/dist/trace/trace.js:154:20)
    at async DevServer.handleRequest (/Users/southclaws/work/site/node_modules/next/dist/server/dev/next-dev-server.js:336:24)
    at async invokeRender (/Users/southclaws/work/site/node_modules/next/dist/server/lib/router-server.js:174:21)
    at async handleRequest (/Users/southclaws/work/site/node_modules/next/dist/server/lib/router-server.js:353:24)
    at async requestHandlerImpl (/Users/southclaws/work/site/node_modules/next/dist/server/lib/router-server.js:377:13)
    at async Server.requestListener (/Users/southclaws/work/site/node_modules/next/dist/server/lib/start-server.js:141:13) {
  [cause]: Error: Unsupported OpenType signature wOF2
      at Object.parseBuffer [as parse] (webpack-internal:///(app-metadata-route)/./node_modules/next/dist/compiled/@vercel/og/index.edge.js:11740:11)
      at zt.addFonts (webpack-internal:///(app-metadata-route)/./node_modules/next/dist/compiled/@vercel/og/index.edge.js:16259:52)
      at new zt (webpack-internal:///(app-metadata-route)/./node_modules/next/dist/compiled/@vercel/og/index.edge.js:16241:10)
      at wl (webpack-internal:///(app-metadata-route)/./node_modules/next/dist/compiled/@vercel/og/index.edge.js:17111:63)
      at async render (webpack-internal:///(app-metadata-route)/./node_modules/next/dist/compiled/@vercel/og/index.edge.js:18780:15)
      at async Object.start (webpack-internal:///(app-metadata-route)/./node_modules/next/dist/compiled/@vercel/og/index.edge.js:19007:25)
```

"Unsupported OpenType signature wOF2" maybe could be interpreted this way but honestly, the stack trace is useless and hides the error. What would be better is a simple "Error: woff2 files are not supported", no need for webpack-internal/node modules lines of code I'll never look at or understand.

### Provide environment information

```bash
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:32:11 PDT 2023; root:xnu-10002.41.9~7/RELEASE_ARM64_T6030
Binaries:
  Node: 21.2.0
  npm: 10.2.3
  Yarn: 1.22.21
  pnpm: 8.10.5
Relevant Packages:
  next: 14.1.4
  eslint-config-next: 14.1.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.3
Next.js Config:
  output: N/A
```


### Which area(s) are affected? (Select all that apply)

Not sure, Font optimization (next/font)

### Which stage(s) are affected? (Select all that apply)

next dev (local)

### Additional context

I've also tried latest canary - still a problem.