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.
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.