Next13で追加された@next/fontを試してみた。

@next/fontでGoogleフォント読み込みを試してみたので、どうやって導入したのか自分メモとして記載していこうと思います。今回はReactとNext.js、TypeScriptの環境になります。
@next/fontのNext.js公式ページ
@next/fontのnpm

※Next14で@next/fontはNext.jsに組み込まれた様子です。インポート先がnext/font/googleに変わります。詳しくはこちら （2024/6/7追記）

環境

• react: 18.2.0
• next: 13.2.4
• @next/font: 13.2.4
• node: v16.13.0
• yarn: v1.22.5

@next/fontをプロジェクトにインストール

yarnを使用してインストールしました。

yarn add @next/font

npmの方は

npm install @next/font

必要なGoogle Fontを読み込み

Noto Sans Japaneseをプロジェクトに読み込んでみようと思います。引数に設定できる値は予測変換で表示されます。
他の値を設定したい方は公式ドキュメントを参考にされると良いと思います。

weight: フォントの太さ。font-weightで指定する値を入力。(必須)配列で一気に指定もできます。
display: フォントの読み込み中の表示方法を制御します。デフォルトはoptionalで、フォントが100ms以内にロードされない場合、自動生成されたフォールバックフォントがブラウザに表示されます。swapを指定するとフォントの読み込みが完了次第反映されるので、今回はこちらを設定しました。
subsets: フォントのサブセット化(使用するものだけを抜き出したフォントを、Webブラウザ上に表示させる技術)します。複数言語を持つ場合、使用する言語を設定できます。*現在、中国語、日本語、または韓国語 (CJK) をサブセットとして選択するとバグが発生する様子です。
preload: プリロード(事前読み込み)するかどうか。中国語、日本語、または韓国語は多くのデータを保持しているため、プリロードはオフにするのが良いです。この場合、displayはswapに設定する必要があります。

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

const notoSansJP400 = Noto_Sans_JP({
  weight: '400',
  display: 'swap',
  preload: false,
});
const notoSansJP700 = Noto_Sans_JP({
  weight: '700',
  display: 'swap',
  preload: false,
});

JavaScriptで読み込んだ変数をCSSに設定

先程読み込んだ値をCSSで読み込めるようにします。
個人的にルートに設定するのが使いやすいと思いました。定数に格納し、ReactのJSXのスタイルタグ内に設定します。これでfont-family: var(--font-ja-primary-400);等で使用したい値を入力すれば適応することができます。

const FONT_FAMILY_ROOT = `
:root {
  --font-ja-primary-400: ${notoSansJP400.style.fontFamily};
  --font-ja-primary-500: ${notoSansJP500.style.fontFamily};
  --font-ja-primary-700: ${notoSansJP700.style.fontFamily};
}
`;

// _app.tsxのHeadタグ内に記載
<style>{FONT_FAMILY_ROOT}</style>

おしまい

今回初めて記事を書いてみました！何かご意見や指摘などあればお気軽にお願い致します。
公式ではCSS Valiablesで設定していますが、毎回importしたり要素に変数を持ってくるのが大変だと思ったので:rootで設定するのが個人的に良いと思いました。