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

Posted at 2025-11-24

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

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

src/app/layout.tsx

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 変数から参照できる。

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up