Add External Font in NextJS in 4 simple steps

Simple steps to follow to add Google fonts to your Next.js project.

Import External Fonts to your Next.js project.

There are multiple ways to add a font to your Next.js project like adding font using CSS import functionality or by downloading the font and using them as assets in Next.

For fast loading it is recommended to use Google Fonts, and the recommended way to import a font into Next.js is by putting in the head tag of the pages/_document.js file.

Follow these steps:

1. Create pages/_document.js file if it already doesn’t exists.
2. Go to Google Fonts and choose your fonts by adding their family, on the right hand right you will get links to them.
3. Copy the <link> tags containing the linking to your google font and paste them inside pages/_document.js.

Basic Structure of _document.js file after adding your font

4. Now head over to your globals.css file and create classes with name of your fonts, for example

.sourceCodePro {
font-family: "Source Code Pro", monospace;
}
.inter {
font-family: "Inter", sans-serif;
}

and there you go, use these classes to make use of your fonts.

Thanks you for reading, follow for more.

Reference
https://nextjs.org/docs/basic-features/font-optimization