Add Font instructions when adding to an existing project

[niclas-j]

After adding the library to 2 different projects I stumbled upon the problem in both on how I add the font variable to my application for the default tw config to work. I always had to check out the template in order to copy the next config and the _app.tsx from there.

The following content should be added to the install instructions.

Fonts

To add a font to your project you have to install @nextjs/font and add the following to your next.config.js:

const config = {
  reactStrictMode: true,
  experimental: {
    fontLoaders: [
      {
        loader: "@next/font/google",
        options: { subsets: ["latin"] },
      },
    ],
  },
}

Then declare the CSS variable in your \_app.tsx

import { Inter as FontSans } from "@next/font/google"

const fontSans = FontSans({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap",
})

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <style jsx global>{`
	   :root {
		--font-sans: ${fontSans.style.fontFamily};
	  }
	}`}</style>
      <Component {...pageProps} />
    </>
  )
}

[niclas-j]

After thinking about it a bit more the font is not really related to the component library, but since the tailwind config in the install instructions includes the font variable, a decision should be made to either exclude the font addition from the docs entirely or to add the suggested documentation changes.

[michal-weglarz]

This turned out to be very helpful to me, as I was just trying to integrate it with an already existing Next project and struggled finding out why fonts were not applied correctly. I'd definitely love to see it mentioned in the docs.

[DevMaxC]

The font loaders option has been removed from NextJS in version 13.3

https://github.com/vercel/next.js/pull/46886

[SahilMahadwar]

Please add this to docs

[shadcn]

Done. https://ui.shadcn.com/docs/installation/next#fonts