TL;DR
このページでは、Google Fonts の実装方法について詳しく解説します。Google Fonts を Next.js と TypeScript のプロジェクトに適用し、ウェブページの見た目を一新する方法を実践的に学んでいきましょう。
以下の開発環境を基準に進めます。
| 開発環境 | バージョン |
|---|---|
| Next.js | 13.4.3 |
| TypeScript | 5.0.4 |
| Emotion | 11.11.0 |
| React | 18.2.0 |
Google Fonts とは？
Google Fonts とは、Google が提供するフリーのフォントライブラリです。多種多様なフォントが用意されていいて、ウェブページで簡単に利用することができる便利なサービスです。
WordPress を扱うときに、Google Fonts を埋め込まれた方は多いのではないでしょうか？でも、読み込み速度が遅くなり、パフォーマンスが悪化するということがありましたよね。
Next.js での導入方法は非常にシンプルで、next/font/googleを使って、フォントを関数としてインポートすることで Googel Font を扱うことができます。さらに、Next.js で使うメリットとしては、ブラウザから Google へのリクエストが送信されないことです。なので、パフォーマンスが悪化することはありません。
Google フォントは自動的に自己ホスティングされます。フォントはデプロイメントに含まれ、デプロイメントと同じドメインから提供されます。
軽量の Google Fonts の例をいくつか挙げると、以下のようなものがあります。
- Roboto
- Open Sans
- Lato
- Raleway
- Montserrat
- Nunito
- Poppins
- PT Sans
- Source Sans Pro
- Roboto Slab
これらのフォントは、すべて Google Fonts のウェブサイトから無料でダウンロードできます。Google Fonts のウェブサイトでは、フォントごとにファイルサイズを確認することができます。ファイルサイズが小さいほど、ページの読み込み速度は向上します。
Next.js で、Google Fonts を実装
それでは具体的に、Next.js と TypeScript の環境で Google Fonts を利用する方法を見ていきましょう。
@next/font をインストールします。
npm install @next/font
次に、Google Fonts の Lato を App Router で使ってみます。
// src/app/page.tsx
import { Lato } from 'next/font/google'
const Lato700 = Lato({
weight: '700',
preload: false,
})
export default function Home() {
return (
<>
<main>
<p>ここはFontが反映されません。</p>
<h1 className={Lato700.className}>ここはFontが反映されます。</h1>
</main>
</>
)
}
以上で反映されます。
フォント関数の引数
Components: Font | Next.jsから、フォントモジュールの詳細を確認することができます。以下に、フォントモジュールのオプションをまとめました。
| 用語 | 説明 |
|---|---|
| src | フォントファイルのパスを指定します。文字列またはオブジェクトの配列として指定できます。 |
| weight | フォントのウェイトを指定します。文字列または配列として指定できます。 |
| style | フォントのスタイルを指定します。文字列または配列として指定できます。 |
| subsets | プリロードしたいフォントのサブセットを指定します。文字列の配列として指定します。 |
| axes | 変数フォントの追加軸を指定します。文字列の配列として指定します。 |
| display | フォントの表示方法を指定します。文字列として指定し、可能な値は 'auto', 'block', 'swap', 'fallback', 'optional' です。 |
| preload | フォントをプリロードするかどうかを指定します。ブール値として指定します。 |
| fallback | フォントがロードできない場合のフォールバックフォントを指定します。文字列の配列として指定します。 |
| adjustFontFallback | レイアウトシフトを減らすための自動フォールバックフォントを使用するかどうかを指定します。ブール値または文字列として指定します。 |
| variable | CSS 変数の名前を指定します。文字列として指定します。 |
| declarations | 生成された@font-face をさらに定義するフォントフェース記述子のキー値ペアを指定します。オブジェクトの配列として指定します。 |
これらの用語は、Next.js の Font Optimization 機能を使用する際に重要なパラメーターとなります。これらを理解することで、フォントの最適化とパフォーマンス向上を実現することができます。
フェイトの指定
可変フォントを使用できない場合は、次のようにウェイトを指定する必要があります。
Building Your Application: Routing | Next.jsに書かれているコードです。
import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
display: 'swap',
})
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={roboto.className}>
<body>{children}</body>
</html>
)
}
可変フォントとは？
可変フォント（Variable Fonts）というのは、1 つのフォントファイル内に複数のスタイルやウェイト（文字の太さ）の情報を格納できる新しいタイプのフォントテクノロジーです。従来のフォントシステムでは、異なるウェイトやスタイルのフォントそれぞれに個別のフォントファイルが必要でしたが、可変フォントでは 1 つのフォントファイルでこれらをすべてカバーします。
可変フォントの最大の利点は、その柔軟性と効率性です。デザイナーは、同じフォントファミリーの異なるウェイトやスタイルを個別にロードする代わりに、1 つの可変フォントファイルをロードするだけで済みます。これによって、ウェブサイトのパフォーマンスを向上させることができるんですね。
さらに、ウェイトや幅、スラントなどの軸を動的に調整することで、さまざまなデザイン表現が可能になります。これは、レスポンシブデザインやアニメーション、アクセシビリティの向上など、新しいデザインの可能性を広げる大きな要素となっています。
複数のウェイト・スタイルを指定する
配列に格納するだけです。
const roboto = Roboto({
weight: ['400', '700'],
style: ['normal', 'italic'],
subsets: ['latin'],
display: 'swap',
})
Noto Sans JP を使う場合
Google Fonts から Noto Sans JP を使用する場合、次のように指定します。
import { Noto_Sans_JP } from 'next/font/google'
const notoSansJP = Noto_Sans_JP({
weight: '400', // あなたが必要とするウェイトを指定します
subsets: ['japanese'], // 必要なサブセットを指定します
display: 'swap', // フォントの表示方法を指定します
})
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja" className={notoSansJP.className}>
<body>{children}</body>
</html>
)
}
このコードは、Noto Sans JP フォントをインポートし、それを HTML 要素に適用します。weightはフォントのウェイトを指定し、subsetsは使用するフォントのサブセットを指定します。displayはフォントがどのように表示されるかを指定します。
また、Google Fonts のページで Noto Sans JP の利用可能なウェイトやスタイルを確認し、それに基づいてweightやstyleを指定することができます。
className とは？
フォントの読み取り専用 CSS です。HTML 要素にクラス名を割り当てることで、その要素に特定のスタイルを適用することができます。
Next.js の Font Optimization 機能では、特定のフォントを適用するためにclassNameプロパティが使用されます。具体的には、Noto_Sans_JPなどのフォント関数を呼び出すと、その戻り値としてフォントのクラス名が含まれるオブジェクトが返されます。このクラス名は、フォントを適用したい HTML 要素のclassName属性に指定します。
例えば、以下のコードではnotoSansJP.classNameを HTML 要素のclassName属性に指定しています。
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja" className={notoSansJP.className}>
<body>{children}</body>
</html>
)
}
これで、HTML 要素全体に Noto Sans JP フォントが適用されます。