はじめに

Next.jsのプロジェクトでGoogle fontsを設定するメモ

１．初期のコード

Next.js14のプロジェクトを立ち上げるとlayout.tsxが以下のようになっている。現在はInterというフォントが使用されているみたい。

layout.tsx before

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

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>
  );
}

２．変更する場所

今回はNoto_Sans_JPというフォントに変更する。おそらく以下のコードのようにすればNoto_Sans_JPが適用できるはず。langは一応jaにしている。

layout.tsx after

import type { Metadata } from "next";
+ import { Noto_Sans_JP } from "next/font/google";
import "./globals.css";

+ const notoSansJP = Noto_Sans_JP({ subsets: ["latin"], weight: ["400"] });

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="ja">
+       <body className={notoSansJP.className}>{children}</body>
    </html>
  );
}

おわりに

一応コピペ用に下にコード貼っときます。

コピペ用

import type { Metadata } from "next";
import { Noto_Sans_JP } from "next/font/google";
import "./globals.css";

const notoSansJP = Noto_Sans_JP({ subsets: ["latin"], weight: ["400"] });

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="ja">
      <body className={notoSansJP.className}>{children}</body>
    </html>
  );
}