はじめに
Next.jsのプロジェクトでGoogle fonts
を設定するメモ
1.初期のコード
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>
);
}
2.変更する場所
今回は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>
);
}