概要

Next.js (App Router) でNoto Sans JPを使うときの方法を忘れてしまったので自分用にメモしておきます。

方法

// 変更前のlayout.tsx
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

これを下のようにする。

// 変更後のlayout.tsx
import "./globals.css";
import type { Metadata } from "next";
import { Noto_Sans_JP } from "next/font/google";

const noto = Noto_Sans_JP({
  weight: ["400", "700"],
  style: "normal",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={noto.className}>{children}</body>
    </html>
  );
}

まとめ

Noto Sans JP以外にも、下のリンクにあるGoogleフォントなら他のやつも使えるみたいです。（Robotsとか）便利ですね。

詳しくは公式ドキュメントを読んでみてください。それでは！

参考サイト