Repository: next.js
Issue: Exporting next/font into separate library throws Webpack compile error
Labels: bug,Font (next/font)

### Verify canary release

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

### Provide environment information

```bash
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro   

Binaries:
  Node: 18.16.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A

Relevant packages:
  next: 13.4.6
  eslint-config-next: 12.2.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.0.2
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

Font optimization (next/font)

### Link to the code that reproduces this issue or a replay of the bug

WIP

### To Reproduce

1. Creating a `turborepo` monorepo setup with a minimum of 2 packages; one which stores the `next/font` definitions, for example an UI library. And one with a Next.js 13.4.6 application.
2. Add the UI library as a dependency to your web application (`npm install -w @my-monorepo/app --save @my-monorepo/ui` )
3. Export the fonts from the UI library and import them into Next.js. When importing, the bug will occur


### Describe the Bug

When exporting the function logic of `next/font` into a separate package and trying to import that back into your main application (next.js 13.4.6 app), I get the following error:

` (0 , next_font_google__WEBPACK_IMPORTED_MODULE_1__.Calligraffitti) is not a function`.

This is inside a default Turborepo setup with NPM. I get the error with both the Google fonts as well as any local font.

My code:
```typescript
// inside @my-application/ui 
// index.ts
// Has next 13.4.6 installed

import { Calligraffitti } from 'next/font/google'

export const Callif = Calligraffitti({
  weight: '400',
  variable: '--font-callif-test'
})
```

```typescript
// inside @my-application/app
// _app.tsx
// Is a fully functional Next.js application inside the monorepo

import { Callif } from '@my-application/fonts'

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps<{ session: Session }>) {

  return (
    <div className={`${Callif.variable}`}>
      <Component {...pageProps}/>
    </div>
  )
}
```

```jsonc
// tsconfig.json for the main Next.js application
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": "./",
    "paths": {
      "components": ["./components"],
      "lib": ["./lib"],
      "pages": ["./pages"],
      "prisma": ["./prisma"],
      "styles": ["./styles"],
      "types": ["./types"],
      "server": ["./server"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
}
```

My `next.config.js` is not configured with any Webpack plugins yet. I am aware that this must be an import/export problem


### Expected Behavior

For the fonts to load as expected, without throwing Webpack errors.

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

Vercel