How do you use the next/font?

[angelhodar]

Hi! I am trying to get my head around how to implement the new next/font package in my project and I dont really understand how can I specify the font as an utility class. In your case I suppose it applies to all the font in the web as you have set it up in the main layout, but how can I specify it to be used for example only for h1 tags or by specifying font-title to an element using tailwind? Thanks in advance!

[shadcn]

I use it with Tailwind and utility classes as well. Here's how it works:

1. Add the font to your pages/_app.tsx

// pages/_app.js
import { Inter } from '@next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',  // <--------- 👈
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${inter.variable}`}>
      <Component {...pageProps} />
    </main>
  )
}

Note the variable: '--font-inter' here. This is where we're telling next/font the name of the CSS variable to use for inter font.

2. Update fontFamily in tailwind.config.js

Next, we update tailwind.config.js to tell Tailwind to use this new CSS variable for our font utility class:

// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} \*/
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)', ...fontFamily.sans], // <--------- 👈
      },
    },
  },
  plugins: [],
}

3. Usage

You can now use font-sans as a utility class for font-family.

<h1 class="font-sans">Heading</h1>

If you want a different name for your utility class, you can do so like this:

// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} \*/
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        inter: ['var(--font-inter)', ...fontFamily.sans], // <--------- 👈
      },
    },
  },
  plugins: [],
}

Now the utility class is going to be font-inter.

Hope this is helpful.

[angelhodar]

@shadcn Thank you so much!! It wasnt working because I was putting the inter.variable in a div instead of main tag

[John-Dennehy]

@shadcn what if we have multiple custom font names to extend, i.e:

      fontFamily: {
        sans: [ "var(--font-outfit)", ...fontFamily.sans],
        serif: [ "var(--font-pt-serif)", ...fontFamily.serif ],
        mono: [ "var(--font-jetbrains-mono)", ...fontFamily.??? ],
        handwriting: [ "var(--font-caveat)" ...fontFamily.??? ],
      },

The default theme only has sans and serif, so what should we use for additional ones?

[smdhnz]

I tried to apply it to Popover, but to my knowledge it was not possible. Please help. (This is poor English from a Japanese person. Sorry.)

[Amirthananth]

I am also facing somewhat the same issue. The font applied to the website globally is not applied to the "Dialog" component. Even class names passed via "DialogContent" is not reflecting.

[smdhnz]

Ultimately, I solved my problem by

// pages/_app.js
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${inter.style.fontFamily};
        }
      `}</style>
      <main>
        <Component {...pageProps} />
      </main>
    </>
  )
}

[MrBond2104]

I am also facing somewhat the same issue. The font applied to the website globally is not applied to the "Dialog" component. Even class names passed via "DialogContent" is not reflecting.

Same issue here. Can't really figure out why it is not working... Have you found a solution for this so that the font is also applied to the dialog?

[Amirthananth]

I am also facing somewhat the same issue. The font applied to the website globally is not applied to the "Dialog" component. Even class names passed via "DialogContent" is not reflecting.

Same issue here. Can't really figure out why it is not working... Have you found a solution for this so that the font is also applied to the dialog?

Was not able to fix it. Since our project was fairly new, we switched to app router for NextJS and fonts work fine there.

[Vilunki]

I am also facing somewhat the same issue. The font applied to the website globally is not applied to the "Dialog" component. Even class names passed via "DialogContent" is not reflecting.

Same issue here. Can't really figure out why it is not working... Have you found a solution for this so that the font is also applied to the dialog?

I have the same problem with pages router.

[kirtirajsinh]

I am also facing somewhat the same issue. The font applied to the website globally is not applied to the "Dialog" component. Even class names passed via "DialogContent" is not reflecting.

same issue. THe custom fonts appied across the web is being applied easily but not applied in the ShadCN/UI components. Has anyone resolved it?

[dezoito]

I'm having trouble using the Geist font in a Vite/React project.

Here's the steps I took

1- Installed the font by running npm i geist

2- Edited tailwind.config.js and added

  theme: {

    extend: {
      fontFamily: {
        sans: ["Geist", ...defaultTheme.fontFamily.sans],
      },

3- Edited globals.css file and added:

@layer base {
...
  html {
    font-family: Geist, system-ui, sans-serif;
  }
}

If I inspect the elements the font used is "Geist", but the actual font displayed never changes. Do I have to import or refer to it somewhere else?

[Eyon42]

I was able to solve this with this, as mentioned here

But issues arose when I tried to use multiple fonts inside a dialog. The solution was adding the font variables directly to the router. In the case of pages router, in _document.tsx

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body className={`${roboto.variable} ${bebasNeue.variable}`}>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

[dezoito]

Thank you, @Eyon42.

I'm not using Next, so the solution was saving the font's TTF files to the project and importing the font in my "globals.css" file and setting it up in the tailwind config file (in case anyone else faces the same issue).

[siznkocy]

@shadcn I'm new to thi shadcn ui and I love it already. Thank you for the that clairty there, the css for the components even look better now.