How to use multiple fonts in NextJS

Objective

• Implement multiple fonts in your React, NextJS application.
• Completion time: 5-10 minutes.

Breakdown

• NextJS
• TailwindCSS
• Next Google Fonts Package
• Google Fonts

Let's Get Started

New Application

• Follow the installation docs from NextJS.
• Make sure you select 'yes' when asked if you want to install TailwindCSS.

npx create-next-app@latest

Existing application

Once you're up and running with a new, or existing application we need to do the following:

• Install the packages
• Import Google Fonts into the application
• Update the tailwind config file
• Use the font on the frontend

Install the packages

Install the @next/font package that allows us to access all of the Google Fonts out there. Using your preferred package manager: npm, bun, pnpm

There are hundreds of Google Fonts available to choose from, each with their own properties to adjust them to your liking.

npm install @next/font

Import Google Fonts

Import the package into your layout.tsx or _app.tsx file

// import
import {Cormorant, Nunito_Sans, Baskervville} from 'next/font/google'

// Create a font object, passing in properties. 
// Note the 'variable' property, it's needed inside tailwind.config
const fancyFont = Cormorant({
    weight: '400',
    subsets: ['latin'],
    variable: '--font-fancy',
});
const readingFont = Nunito_Sans({
    subsets: ['latin'],
    variable: '--font-reading',
});

const alternative = Baskervville({
    weight: '400',
    subsets: ['latin'],
    variable: '--font-alternative-syntax'
});

// pass the font values into the wrapper class to
// make them available throughout the entire application
// this can also go in the html or body elements if necessary
export default function MyApp({ Component, pageProps }) {
  return (
        <main className={`
                    ${fancyFont.variable} 
                    ${readingFont.variable} 
                    ${alternative.variable}`}>

            <Component {...pageProps} />
        </main>
  )
}

Configure tailwind.config.ts

• Extend the theme property to include our new fonts.
• In this section, the left side fancy, "alternative-syntax" can be called anything you want.
• The left side is what you'll use in your Tailwind class to use the font
• The contents of var() must match variable name defined in the _app.tsx or layout.tsx file where you initialised the NextFont object.

  //content...
    theme: {
        extend: {
            fontFamily: {
                fancy: ["var(--font-fancy)"],
                reading: ["var(--font-reading)"],
                "alternative-syntax": ["var(--font-alternative-syntax)"]
            },
        },

Use the font

Now that the font is installed, all that is left is to use it inside your react components by adding the class onto the HTML element.

<div className="text-black">
    <h1 className="font-fancy">I am the fancy font using Cormorant</h1>
    <p className="font-reading">Reading font using Nunito Sans</p>
    <p className="font-alternative-syntax">Baskerville font with alternative syntax.</p>
</div>

Result

Why Bother?

The simple act of adding a few different font stylings into your NextJS, React application can help elevate your websites design much more than you would expect.

As developers, we can sometimes focus too much on getting things to work (who doesn't love that feeling), we add finesse through abstraction or complexity, and sometimes - we forget to make our frontend look as pretty as the code that's behind it.

Hopefully now, you can add an additional layer of creativity into your designs.