従来のやり方
はじめに Next.js 13 以前の環境で Google Fonts を使う方法を説明します。
大まかな流れは以下の通りです。
- Google Fonts から使用するフォントを選ぶ
- フォントを取得するための
<link>タグを_document.tsx内に埋め込む
使用するフォントを選ぶ
Google Fonts にアクセスして、使用するフォントとそのスタイルを選択します。ここでは、当サイトでも使用している Noto Sans Japanese を選択してみました。
link タグを埋め込む
Google のサーバーからフォントを読み込むためのコードが自動生成されました。Next.js ではフォントの読み込みを _document.tsx 内で行います。コードをコピーして <Head> コンポーネント内に貼り付けましょう。その際に JSX の記述方法に合わせて、若干のカ調整 (閉じタグ・クロスオリジン) が必要です。
import { Head, Html, Main, NextScript } from 'next/document';
const Document = () => (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
export default Document;
Noto Sans Japanese を使用する準備ができました。あとは CSS にフォントを記述するだけです。
body {
font-family: 'Noto Sans JP', sans-serif;
}
Web フォントのデメリット
これは Next.js に限った話ではないのですが、Google Fonts のような Web フォントはブラウザからのネットワークリクエストで取得されます。高速なインターネット回線が提供されている今日では、遅延はあまり問題にならないかもしれません。しかし、改善の余地があることは確かです。
DevTools のネットワークタブを開くと、ページをロードする度に Google Fonts を取得していることをがわかります。
新しいやり方
Next.js 13 では next/font を使うことで、フォントをアプリケーションにバンドルできます。
大まかな流れは以下の通りです。
@next/fontモジュールをインストールする_app.tsx内で使用したいフォントを設定する
モジュールのインポート
はじめに @next/font をインストールします。
⚠️ Next.js 14 からはビルトインのnext/font が使用できるため、この手順は必要ありません。
npm install @next/font
使用したいフォントの設定
@/next/font/google から使用するフォントをインポートします。
import { Noto_Sans_JP } from '@next/font/google';
import type { AppProps } from 'next/app';
import '@/styles/globals.css';
const notoSansJP = Noto_Sans_JP({
// preload するサブセット (フォントのコレクション) を選択する。
subsets: ['latin'],
// フォントのスタイルを選択する (Variable Fonts を使用する場合は必要ない)。
weight: ['400', '700'],
});
const App = ({ Component, pageProps }: AppProps) => (
// 全ページでフォントを有効にする
<Component {...pageProps} className={notoSansJP.className} />
);
export default App;
これで Noto Sans Japanese を使用する準備ができました。従来の方法と違い、Google のサーバーからフォントを取得する必要がなくなるため、ネットワーク遅延の影響を受けなくなります。
おわりに
Next.js 13 で Google Fonts を使う上で必要なことを学び直しました。基本となる知識を身につけられたと思います。