コンテンツにスキップ

Next.js で Google フォントを使う

Getting Started: Font Optimization | Next.js

Noto Sans Japanese と Noto Serif Japanese のフォントを使ってみる。

next/font/googleモジュールを使うと Google フォントを簡単に読み込むことができる。追加でパッケージをインストールする必要はない。

src/app/layout.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Noto_Sans_JP, Noto_Serif_JP } from "next/font/google";

const notoSans = Noto_Sans_JP({
  weight: ["400", "700"],
  subsets: ["latin"],
  variable: "--font-noto-sans-jp",
});

const notoSerif = Noto_Serif_JP({
  weight: ["400", "700"],
  subsets: ["latin"],
  variable: "--font-noto-serif-jp",
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html>
      <body className={`${notoSans.variable} ${notoSerif.variable}`}>
        {children}
      </body>
    </html>
  );
}

CSS からフォントを使う場合、src/app/layout.tsxで定義した CSS 変数から参照できる。

1
2
3
body {
  font-family: var(--font-noto-sans-jp), sans-serif;
}