How to add fonts to your Next.js 13 RSC app directory

Learn how to add fonts using the next/font package to your Next.js project using the app directory.

·3 min read

Adding fonts using the next/font package to your Next.js project allows you to load type-safe and optimized fonts in your Next.js app.

While adding the next/font package to your Next.js project is relatively straightforward, doing it using the experimental app directory is a bit more involved: in fact, the current solution in the documentation delays thr loading of global stylesheets, making the font flickering very noticeable. In this tutorial, I will show you how to add fonts to your Next.js project using the app directory and the new RSC layouts.

Additionally, I will show you how to add fonts to your Tailwind configuration file, so that you can use them in your components.

NB: this is likely a temporary solution until the next/font package is updated to support the app directory.

Using the next/font package

The next/font package allows us to import Google Fonts and store them locally, imported as Typescript functions.

For example, we can import the popular font Inter from Google Fonts:

import {
  Inter as SansFont
} from 'next/font/google';

Next, we want to define a client component that we use in the root layout to load the fonts. Since we need to mark it a client component, we will create a new file.

Then, we use the new function useServerInsertedHTML from the next/navigation package to insert the font styles in the <head> of the page. Since the component does not need to render anything, we return null.

Below is the full code for the Fonts component:

'use client';
 
import { Inter as SansFont } from 'next/font/google';
import { useServerInsertedHTML } from 'next/navigation';
 
const sans = SansFont({
  subsets: ['latin'],
  variable: '--font-family-sans',
  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
  weight: ['300', '400', '500', '600', '700', '800'],
  display: 'swap',
});
 
function Fonts() {
  useServerInsertedHTML(() => {
    return (
      <style
        dangerouslySetInnerHTML={{
          __html: `
          :root {
            --font-family-sans: '-apple-system', 'BlinkMacSystemFont',
              ${sans.style.fontFamily}, 'system-ui', 'Segoe UI', 'Roboto',
              'Ubuntu', 'sans-serif';
          }
        `,
        }}
      />
    );
  });
 
  return null;
}
 
export default Fonts;

Ideally, you'd define your fonts in your Tailwind configuration file assigned to the variable --font-family-sans:

module.exports = {
  theme: {
    fontFamily: {
      sans: ['--font-family-sans', 'sans-serif'],
    },
  },
};

Now, we can add this component to the root layout, so that it is rendered on every page.

import './globals.css';
import Fonts from '~/components/Fonts';
 
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang={'en'}>
      <Fonts />
 
      <body>{children}</body>
    </html>
  );
}

Conclusion

In this tutorial, we learned how to add fonts to our Next.js project using the next/font package and the new RSC layouts. This is a temporary solution since it will probably be fixed by the Next.js team, but for now it's the best way I found to use the next/font package with the new Next.js app directory.

👋 Hi! Would you like to learn how to build an AI SaaS with Next.js, Supabase and Stripe including a fully working SaaS template? Check out our new course!