TL;DR
Next.js で、どんなフォントでも自動でセルフホスティングできるようにするモジュール。Google Fonts のフォントも、アプリケーションと同じドメインから配信できる。
なぜ必要か
フォントを自分でホスティングするには、フォントファイルと CSS ファイルを用意する必要がある。next/font を使うと、これを自動で行ってくれる。
仕組み
Google Fonts のフォントはデプロイに含まれ、デプロイ先と同じドメインから配信される。そのため、ブラウザから Google にリクエストが送られることはない。
Google Fonts は自動でサブセット化されるので、どのサブセットをプリロードするかを subsets で指定する。サブセットの取得に失敗すると警告が出る。
例
Root Layout で、使いたいフォントを next/font/google から読み込む。
import { Roboto } from "next/font/google"
const roboto = Roboto({
weight: ["400", "700"],
style: ["normal", "italic"],
subsets: ["latin"],
display: "swap",
})
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={roboto.className}>
<body>{children}</body>
</html>
)
}可変フォントでない場合は weight が必須である。配列を渡すと、複数の weight や style を指定できる。
フォントを CSS 変数として使うときは、フォント関数の variable に変数名を指定し、<インスタンス名>.variable を親要素の className に付ける。
const inter = Inter({ variable: "--font-inter" })
<main className={inter.variable}>
<p className={styles.text}>Hello World!</p>
</main>注意点
localFont や Google Fonts の関数は、呼び出すたびに別のインスタンスとしてホストされる。同じフォントを複数のファイルで使うときは、1 つのファイルでだけ関数を呼び出して export し、ほかのファイルからはそれを読み込む。
// styles/fonts.ts
import { Inter, Lora } from "next/font/google"
import localFont from "next/font/local"
const inter = Inter()
const lora = Lora()
const myFont = localFont({ src: "./my-font.woff2", display: "swap" })
export { inter, lora, myFont }