Repository: next.js
Issue: Playwright throws FetchError /w Google Font Loader when no `./.next/static/media` directory exists
Labels: bug

### Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/nextjs-14-0-1-playwright-experimental-font-loader-error-yqvwps?file=%2FREADME.md%3A12%2C18

### To Reproduce

When using Playwright where the Google Fonts aren't previously fetched and stored in the `./.next/static/media` directory, you get errors in the console when running Playwright tests.

Requirements

- Next 14.0.1 (or canary)
- Playwright
- MSW

```
> npx playwright test

[WebServer] request to https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap failed, reason: No test info

Retrying 1/3...
[WebServer] request to https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap failed, reason: No test info

Retrying 2/3...
[WebServer] FetchError: request to https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap failed, reason: No test info
    at v.<anonymous> (/workspace/node_modules/next/dist/compiled/node-fetch/index.js:1:65756)
    at v.emit (node:events:517:28)
    at v.emit (/workspace/node_modules/next/dist/compiled/@mswjs/interceptors/ClientRequest/index.js:1:5957)
    at /workspace/node_modules/next/dist/compiled/@mswjs/interceptors/ClientRequest/index.js:1:4363 {
  type: 'system',
  errno: undefined,
  code: undefined
}
[WebServer]  ⨯ Failed to download `Inter` from Google Fonts. Using fallback font instead.

Failed to fetch `Inter` from Google Fonts.}

Running 1 test using 1 worker

  ✓  1 tests/home.spec.ts:5:7 › home page › should show some NextJS stuff (2.7s)

  1 passed (18.5s)
```

How to resolve:

- Running `npm run build` which populates the `.next/static/media` directory with fonts.  `npm run dev` does not work.
- Running `npm test` afterwards gives you no errors 🎉



### Current vs. Expected behavior

Current behaviour
===
- Playwright tries fetching Google Fonts and throwing errors
- Tests pass

Expected behaviour
===
- No font errors
- Tests pass

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Local:

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Fri Sep 15 13:41:28 PDT 2023; root:xnu-8796.141.3.700.8~1/RELEASE_ARM64_T6000
Binaries:
  Node: 18.17.0
  npm: 9.6.7
  Yarn: N/A
  pnpm: 8.7.1
Relevant Packages:
  next: 14.0.1
  eslint-config-next: 13.5.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

CodeSandbox:

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.0.1
  eslint-config-next: 13.5.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A
```


### Which area(s) are affected? (Select all that apply)

Not sure

### Additional context

- Tested on Next 14.0.1 both locally and CodeSandbox.  
- Tested `next@canary` in CS, same thing.