概要
Next.js (App Router) でNoto Sans JPを使うときの方法を忘れてしまったので自分用にメモしておきます。
方法
1// 変更前のlayout.tsx
2import './globals.css'
3import type { Metadata } from 'next'
4import { Inter } from 'next/font/google'
5
6const inter = Inter({ subsets: ['latin'] })
7
8export const metadata: Metadata = {
9 title: 'Create Next App',
10 description: 'Generated by create next app',
11}
12
13export default function RootLayout({
14 children,
15}: {
16 children: React.ReactNode
17}) {
18 return (
19 <html lang="en">
20 <body className={inter.className}>{children}</body>
21 </html>
22 )
23}これを下のようにする。
1// 変更後のlayout.tsx
2import "./globals.css";
3import type { Metadata } from "next";
4import { Noto_Sans_JP } from "next/font/google";
5
6const noto = Noto_Sans_JP({
7 weight: ["400", "700"],
8 style: "normal",
9 subsets: ["latin"],
10});
11
12export const metadata: Metadata = {
13 title: "Create Next App",
14 description: "Generated by create next app",
15};
16
17export default function RootLayout({
18 children,
19}: {
20 children: React.ReactNode;
21}) {
22 return (
23 <html lang="en">
24 <body className={noto.className}>{children}</body>
25 </html>
26 );
27}まとめ
Noto Sans JP以外にも、下のリンクにあるGoogleフォントなら他のやつも使えるみたいです。（Robotsとか）便利ですね。
詳しくは公式ドキュメントを読んでみてください。それでは！