Nextjs13(AppRouter)+TailwindCSSでNotoSansJPを使う方法

Posted at 2024-02-15

追加するコード

//layout.tsx

+ import { Noto_Sans_JP } from "next/font/google";


+ const notoSansJP = Noto_Sans_JP({
+  subsets: ["latin"],
+  variable: "--font-noto-sans-jp",
+ });


export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja" 
+    className={`${notoSansJP.className}`}
    >
        {/* 省略 */}
    </html>
  );
}

手順

・layout.tsxを開く
・Noto_Sans_JPを"next/font/google"からimport
・subsetsとvariableを設定
・htmlタグのclassNameに.classNameを入れる

コピペ用

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

const notoSansJP = Noto_Sans_JP({
  subsets: ["latin"],
  variable: "--font-noto-sans-jp",
});

className={`${notoSansJP.className}`}

補足

※classNameを{}で囲っているのはhtmlタグに他のoptionを追加する時のため。

例

className={`${notoSansJP.className} bg-black`}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up