🔣
Next.jsにおけるGoogle Fontsの設定について

2024/10/18に公開
 はじめにウェブサイトのタイポグラフィは、ユーザー体験とブランドアイデンティティに大きな影響を与えます。Next.jsとGoogle Fontsを組み合わせることで、美しくパフォーマンスの高いフォント設定を実現できます。
今回は、日本語の基本フォントとして「M_PLUS_1p」、英語の基本フォントとして「Montserrat」、特定の部分で使用する装飾的な日本語フォントとして「Zen_Old_Mincho」を使用する例を通じて、設定手順を説明します。

 1. フォントの設定layout.tsxファイル（通常はsrc/app/layout.tsx）を開き、以下のようにフォントを設定します。
layout.tsx
import { M_PLUS_1p, Montserrat, Zen_Old_Mincho } from 'next/font/google'

const mPlus = M_PLUS_1p({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-m-plus',
  display: 'swap',
})

const montserrat = Montserrat({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-montserrat',
  display: 'swap',
})

const zenOldMincho = Zen_Old_Mincho({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-zen-old-mincho',
  display: 'swap',
})
※subsetsを「japanese」にするとタイプエラーが出るので注意
（設定の説明）

subsets: フォントのサブセットを'latin'に指定します

weight: 使用するフォントウェイトを指定します。ここでは通常（400）と太字（700）を指定します

variable: CSS変数名を設定します。これにより、Tailwind CSSなどで簡単にフォントを参照できます

display: 'swap': フォントの読み込み中に一時的に別のフォントを表示し、ユーザー体験を向上させます

 2. フォントの適用同じlayout.tsxファイル内で、フォントをbody要素に適用します。
layout.tsx
default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body className={`${mPlus.variable} ${montserrat.variable} ${zenOldMincho.variable} font-sans antialiased`}>
        {children}
      </body>
    </html>
  )
}

 3. Tailwind CSSの設定tailwind.config.jsファイルを開き、フォントファミリーを設定します。
tailwind.config.ts
module.exports = {
  theme: {
    extend: {
       fontFamily: {
        'sans': ['var(--font-m-plus)', 'var(--font-montserrat)', 'sans-serif'],
        'montserrat': ['var(--font-montserrat)', 'sans-serif'],
        'zen': ['var(--font-zen-old-mincho)', 'serif'],
      },
    },
  },
  // 他の設定...
}
この設定により
デフォルトのサンセリフフォントとしてM PLUS 1pとMontserratが使用されます。
font-montserrat クラスを使用して、Montserratフォントを明示的に適用できます。
font-zen クラスを使用して、特定の要素にZen Old Minchoフォントを適用できます。

 4. フォントの使用これで、プロジェクト全体で簡単にフォントを使用できます。例えば：
<h1 className="font-montserrat">Whisky Collection</h1>
<p className="font-sans">ウイスキーの世界へようこそ。</p>
<blockquote className="font-zen">古の知恵が宿る一滴。</blockquote>
（注意点とベストプラクティス）
1. パフォーマンスの最適化
必要なサブセットのみを指定し、不要な文字をロードしないようにしましょう。

weightオプションで必要なフォントウェイトのみを指定することで、ファイルサイズを削減できます。
2. フォールバックフォントの設定
フォントが読み込めない場合に備えて、適切なフォールバックフォントを設定しましょう。
3. アンチエイリアシング
antialiasedクラスを使用することで、フォントの表示品質を向上させることができます。
4. 言語切り替えの考慮

多言語サイトの場合、言語に応じて適切なフォントが使用されるよう設計しましょう。
5. ブラウザ互換性のテスト
異なるブラウザやデバイスでフォントの表示をテストし、一貫性を確保しましょう。

 まとめNext.jsとGoogle Fontsを組み合わせることで、パフォーマンスを犠牲にすることなく、美しいタイポグラフィを実現できます。日本語と英語の両方に対応したフォント設定を行うことで、海外の方にも対応できるウェブサイトを作成できます。

フォントの選択と設定は、ウェブデザインの重要な要素の一つです。ユーザー体験とブランドアイデンティティを考慮しながら、最適なフォント設定を見つけてください。
はじめに

1. フォントの設定

2. フォントの適用

3. Tailwind CSSの設定

4. フォントの使用

まとめ

Discussion
