tips / nextjs
Using next/font in Next.js 13
February 27, 2023
What is next/font?
next/font is a tool that automatically optimizes fonts, including custom fonts, and removes external network requests for privacy and performance improvement. It works in both the app
directory introduced in Next.js v13 and the previous pages
folder.
In this article, I will focus on the usage in the app
directory.
Prerequisites
- next: 13.1.6
- @next/font: 13.1.6
Using Google Fonts
For optimal performance, it is recommended to use Variable fonts.
However, it is also possible to use non-variable fonts.
Basic Usage
Configure next/font
in files like app/layout.tsx
or app/page.tsx
.
import { Montserrat } from "@next/font/google";
const montserrat = Montserrat({
subsets: ["latin"],
display: "swap",
});
export default function Home() {
return (
<p className={montserrat.className}>
Montserrat is applied
</p>
);
}
If you are not using Variable fonts, specifying the weight
is required. Here's an example using Noto Sans Japanese.
import { Noto_Sans_JP } from "@next/font/google";
const notojp = Noto_Sans_JP({
weight: ["400", "500"],
subsets: ["latin"],
display: "swap",
});
export default function Home() {
return (
<p className={notojp.className}>
Noto Sans Japanese is applied
</p>
);
}
Using Multiple Fonts
Let's explain how to apply fonts to the entire site as an example.
When specifying multiple fonts, use CSS custom properties (variables). Add the variable
option to the font function.
// app/fonts.ts
const montserrat = Montserrat({
subsets: ["latin"],
variable: "--font-montserrat",
display: "swap",
});
const notojp = Noto_Sans_JP({
weight: ["400", "500"],
subsets: ["latin"],
variable: "--font-notojp",
display: "swap",
});
Specify the variable
in the className of the parent container of the element you want to apply the style to. In layout.ts
, specify it in the <html>
tag.
// app/layout.ts
<html lang="en" className={`${montserrat.variable} ${notojp.variable}`}>
Specify the fonts for the body
in global.css
.
// app/global.css
body {
font-family: var(--font-montserrat), var(--font-notojp), sans-serif;
}
Applying Styles
Use CSS custom properties (variables) and add the variable
option to the font function.
const notojp = Noto_Sans_JP({
weight: ["400", "500", "700"],
subsets: ["latin"],
variable: "--font-notojp",
display: "swap",
});
Specify the variable
in the className of the parent container of the text you want to apply the style to, and specify the styles
property used in the CSS file in the className of the text where you want to apply the style.
export default function Home() {
return (
<div className={notojp.variable}>
<h3 className={styles.headline}>
Noto Sans Japanese 700 / font-size: 28px is applied
</h3>
<p className={styles.text}>
Noto Sans Japanese 400 / font-size: 16px is applied
</p>
</div>
);
}
In the CSS file, specify the styles as follows:
/* styles/component.module.css */
.headline {
font-family: var(--font-notojp);
font-size: 28px;
font-weight: 700;
}
.text {
font-family: var(--font-notojp);
font-size: 16px;
font-weight: 400;
}
Besides Google Fonts, you can also load local font files. The only difference in the setup is specifying the path to the font file using src. For more details, please refer to the official documentation.
References
- File Conventions: Layout | Next.js https://beta.nextjs.org/docs/api-reference/components/font(2023-2-25参照)
- Optimizing Fonts | Next.js https://beta.nextjs.org/docs/optimizing/fonts(2023-2-25参照)