🦁

Next.jsでのgoogleフォント設定方法 Noto Sans JP

2024/09/05に公開

Next.js

Google Fonts

tech

はじめに

Next.jsでのgoogleフォント Noto Sans JPを設定する方法でベストなものが見当たらず困ったため、記録しておきます。

前提

Next.js14
App Router使用

結論

先に結論を書いておきます。現段階でベストなのはこの記法だと思います。後で理由を書きます。

app/layout.jsx


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

// Noto Sans JP フォントの設定
const noto = Noto_Sans_JP({
  subsets: ['latin'],
});

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body className={noto.className}>
        {children}
      </body>
    </html>
  );
}

理由

Next.jsの公式サイトではgoogleフォントの例として以下が掲載されています。
フォントの最適化

import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

この設定はvariableフォントとして使う場合の設定です。
特にweight等を指定しない場合はデフォルトでvariableフォントになるようです。
※variableフォント対象のフォントである場合

ではsubsets: ['latin']とは何でしょうか？

これはラテン文字をサブセットとして設定するものです。

でも日本語フォントなのにラテン文字をセットするのはおかしいのでは？と思いませんか？
そもそも余計な設定なのでは？サブセットの設定をしなかったらデフォルトの日本語だけになるんじゃない？と考えました。
「デフォルト設定ならこれじゃね？」

const noto = Noto_Sans_JP();

でも結果はエラー。

//エラーメッセージ
next/font error:
Preload is enabled but no subsets were specified for font Noto Sans JP. Please specify subsets or disable preloading if your intended subset can't be preloaded.
Available subsets: cyrillic, latin, latin-ext, vietnamese

Read more: https://nextjs.org/docs/messages/google-fonts-missing-subsets

Noto Sans JPはcyrillic, latin, latin-ext, vietnamese　のとれかをsubsetとして設定しなければならないと書いてあります。

という訳で、Noto Sans JPをvariableフォントで使うために以下の設定にしました。

const noto = Noto_Sans_JP({
  subsets: ['latin'],
});

これでnpm run devで走らせてもエラーメッセージがでない、きれいな表示となりました。

variableかweight指定か？

weightを指定するかどうかには迷いがあったのですが、下記記事を読んでweight指定なし、variableフォントを採用しました。速さはサイトにとっては重要な点なので気をつけたい所です。
この記事でも本記事と同様の設定方法を採用しています。

何かご指導ご指摘などあればコメントをいただければと思います。

はじめに

前提

結論

理由

variableかweight指定か？

Discussion