You may want to use custom fonts to make your Next.js application more visually appealing. Using custom fonts can significantly enhance the look and feel of your website, but it can also slow down your site’s performance if not optimized properly. The @next/font package is a solution to this problem.

The @next/font package provides a simple and efficient way to optimize font loading in Next.js, improving page loading time and overall performance. This article provides information on how to use @next/font in your Next.js project.

Installing the Package

You can install the @next/font package by running the following command in your terminal:

        npm install @next/font

If you are using yarn, you can install the package by running this command:

        yarn add @next/font

Using the @next/font to Optimize Google Fonts

The @next/font package optimizes the usage of Google fonts. The @next/font automatically self-hosts the Google fonts on the Next.js server so that no request is sent to Google to get the fonts.

To use a Google font in your application, you will import the font as a function from @next/font/google into the _app.js file in the pages directory:

        import { Roboto } from '@next/font/google'

const roboto = Roboto({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  )
}

In the code block above, you created a variable font using the Roboto font function. The subset property subsets the font to the Latin characters alone; if you use another language, you can subset the font to that language.

You can also specify the font weight along with the font style when defining the font:

        const roboto = Roboto( 
  {
    subsets: ['latin'],
    weight: '400',
    style: 'italic'
  }
)

You specify multiple font weights and font styles using arrays.

For example:

        const roboto = Roboto( 
  {
    subsets: ['latin'],
    weight: ['400', '500', '700'],
    style: ['italic', 'normal']
  }
)

Next, you will wrap your components in a main tag and pass the font as a class to the main tag:

        import { Roboto } from '@next/font/google'

const roboto = Roboto(
  {
    subsets: ['latin'],
    weight: ['400', '500', '600'],
    style: ['italic', 'normal']
  }
)

export default function MyApp({ Component, pageProps }) {
  return (
<main className={roboto.className}>
<Component {...pageProps} />
</main>
  )
}

Rendering your application with the code block above will apply the font to your entire application. Alternatively, you can apply the font to a single page. To do this, you add the font to a specific page.

Like so:

        import { Roboto } from '@next/font/google'

const roboto = Roboto(
  {
    subsets: ['latin'],
    weight: ['400', '500', '600'],
    style: ['italic', 'normal']
  }
)

export default function Home() {
  return (
    <div className={roboto.className}>
      <p>Hello There!!!</p>
    </div>
  )
}

Using the @next/font to Optimize Local Fonts

The @next/font package also optimizes the usage of local fonts. The technique of optimizing local fonts through the @next/font package is quite similar to the optimization of Google fonts, with subtle differences.

To optimize local fonts, utilize the localFont function provided by the @next/font package. You import the localFont function from @next/font/local and then define your variable font before using the font in your Next.js application.

Like so:

        import localFont from '@next/font/local'

const myFont = localFont({ src: './my-font.woff2' })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
<Component {...pageProps} />
</main>
  )
}

You define the variable font myFont using the localFont function. The localFont function takes an object as its argument. The object has a single property, src, which is set to the file path of the font file in the WOFF2 format "./my-font.woff2".

You can use multiple font files for a single font family. To do this, you set the src property to an array containing objects of the different fonts and their properties.

For example:

        const myFont = localFont( 
  {
    src: [
      {
        path: './Roboto-Regular.woff2',
        weight: '400',
        style: 'normal',
      },
      {
        path: './Roboto-Italic.woff2',
        weight: '400',
        style: 'italic',
      },
      {
        path: './Roboto-Bold.woff2',
        weight: '700',
        style: 'normal',
      },
      {
        path: './Roboto-BoldItalic.woff2',
        weight: '700',
        style: 'italic',
      },
    ]
  }
)

Using the @next/font With Tailwind CSS

To use the @next/font package with Tailwind CSS, you need to use CSS variables. To do this, you will define your font using Google or local fonts and then load your font with the variable option to specify the CSS variable name.

For example:

        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} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

In the code block above, you created the font, inter, and set the variable to --font-inter. The className of the main element is then set to the font variable and font-sans. The inter.variable class will apply the inter font to the page, and the font-sans class will apply the default sans-serif font.

Next, you add the CSS variable to the tailwind configuration file tailwind.config.cjs:

        /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",],
  theme: {
    extend: {
fontFamily: {
        sans: ['var(--font-inter)'],
      },
},
  },
  plugins: [],
}

You can now apply the font in your application using the font-sans class.

Font Optimization With @next/font

The @next/font package is a simple and effective way to optimize font loading in Next.js. This package ensures that your custom fonts are loaded efficiently, improving your website's performance and user experience. This article provides information on how to set up the @next/font package and utilize it in your Next.js application. You can further improve your site's performance by optimizing images.