Next.js gives you two options when it comes with loading fonts into your app. You can either load them from Google Fonts, or load a font file from the local file system. The good news is, no matter which option you choose, Next.js will automatically optimize the font files by self-hosting them.
Even when you opt to use Google Fonts, the font files will be downloaded during the build time, and no external requests will be sent to Google when the app is in production.
Loading from Google Fonts
To load from Google Fonts, you can use the next/font/google package.
layout.jsx
1// Import your desired fonts from Google
2// For fonts with multiple words (Roboto Mono), use the underscore (Roboto_Mono)
3import { Roboto } from "next/font/google";
4
5// Additional configurations for each font
6const myFont = Roboto({
7 . . .
8});
9
10// Embed the font
11export default function Layout({ children }) {
12 return (
13 <html lang="en">
14 <body className={myFont.className}>{children}</body>
15 </html>
16 );
17}Inside the imported functions, you may provide additional configuration options for that specific font. Most common options include:
weight
If you are using a variable font, which means it has a single font file that contains multiple styles and weights, this option can be omitted.
But for a non-variable font, you must explicitly specify the weight you wish to use. For example: