How do I properly use @next/font for two fonts in Next.JS?

Question

I'm using Next.JS v13 and having trouble understanding how @next/font works under the hood. In particular, I'm trying to use two Google fonts with TailwindCSS, but don't understand how this works.

I'm using layout.tsx, tailwind.config.js, and globals.css.

layout.tsx:

    import { Alegreya_Sans, PT_Sans } from "@next/font/google";
    
    const header = Alegreya_Sans({
      subsets: ["latin"],
      weight: "500",
    });
    
    const body = PT_Sans({
      subsets: ["latin"],
      weight: "400",
      variable: "--body",
    });
    
    import "../styles/globals.css";
    
    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode;
    }) {
      return (
        <>
          <html lang="en-us" className={`${body.variable} font-body`}>
            <head />
    
            <body>    
              {children}
            </body>
          </html>
        </>
      );
    }

globals.css:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    @layer base {
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: "Alegreya Sans", sans-serif;
        font-weight: 500;
      }
   }

tailwind.config.js:

    const defaultTheme = require("tailwindcss/defaultTheme");
    
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./src/app/**/*.{js,ts,jsx,tsx}",
        "./src/pages/**/*.{js,ts,jsx,tsx}",
        "./src/components/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {
          fontFamily: {
            body: ["var(--body)", ...defaultTheme.fontFamily.sans],
          },
        },
      },
      plugins: [],
    };

In layout.tsx, I'm not using the "header" variable, but it appears from my browser network tab that the page is downloading from Google the "Alegreya Sans" font anyhow.

Is there a way to just call the function without specifying a variable? It wouldn't work unless I declared this "header" variable.

While this appears to work, is it the optimized way to do two fonts? All the documentation shows only a single font, which I suspect is just a way to set a default one via a CSS class or a CSS variable, but I'm not sure.

How do I properly use @next/font for two fonts in Next.JS?

0 Answers0