📘

Next.js(App Router)& TailwindCSSでGoogleFont（Noto Sans JP）を設定してみた。

2023/08/13に公開

Next.js

TypeScript

tech

Next.jsを初めて使いましたが、デフォルトでTailwindcssの設定になっていたので、Google Fontの設定に少し苦戦しました。

備忘録として記事に残します。

変更するファイル

layout.tsx
（tailwind.config.js）

変更内容

全体のフォントを変更する場合、laytout.tsxのみ変更すればよかったです。

layout.tsx

import {Noto_Sans_JP} from 'next/font/google';

// 使用したいフォントの設定
const noto = Noto_Sans_JP({
  weight: ['400', '700'],
  subsets: ['latin'],
  variable: '--font-noto-sans-jp',
});

export const metadata = {
  title: 'タイトル',
  description: '説明...',
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja" className="h-full bg-white">
    {/* クラス名を読み込む */}
    <body className={`h-full ${noto.className}`}>
    {children}
    </body>
    </html>
  )
}

一部のみGoogleFontを使用したい場合は、tailwind.config.jsでクラス名の変数を指定します。

変更するファイル

変更内容

Discussion