Custom Font in Next13 App Dir

Do you want to request a feature or report a bug?

bug

What is the current behavior?

When I import a custom global font into the layout file, I receive the following error: 'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

Create a new Nextjs13 App with the App dir enabled. Inside the root layout file, initialise a new custom font:

const font = localFont({ src: "../public/example.ttf", })

Then add the following css to the layout:

<style jsx global>{`
        :root {
          font: ${font.style.fontFamily};
        }
      `}</style>

What is the expected behaviour?

A new css font family variable should be initialized for use elsewhere in the app

Environment (include versions)

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:41 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8103
Binaries:
  Node: 19.1.0
  npm: 8.19.3
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.3.1-canary.13
  eslint-config-next: 13.3.0
  react: 18.2.0
  react-dom: 18.2.0

Did this work in previous versions?

It works without the app dir.

vercel / styled-jsx