Open2
NextJS メモ（ver. 14.2.5）
masaniフォントの適用
概要
Noto Sans Japanese のフォントを適用したい。
適用対象はすべて。
方法
アプリの全体レイアウト設定ファイルで指定できる。
e.g. layout.tsx
-
next/font/googleから Noto_Sans_JP をインポートする。 - 任意のオプションで
Noto_Sans_JPオブジェクトを作成する。 - 2.で作成したオブジェクトの
classNameプロパティを body の className に適用する。
import type { Metadata } from 'next';
import { Noto_Sans_JP } from 'next/font/google';
import './globals.css';
const notoSansJP = Noto_Sans_JP({ subsets: ['latin'], display: 'swap' });
export const metadata: Metadata = {
title: 'title',
description: 'description',
};
const RootLayout = ({
children,
}: Readonly<{
children: React.ReactNode;
}>) => {
return (
<html lang="ja">
<body className={notoSansJP.className}>{children}</body>
</html>
);
};
export default RootLayout;
参考
masaniテキストエリア要素の高さを自動で変更したい
以下、記事を書いた。