next.js14のnext/fontを使って複数font family,font weightをつかう方法

概要

今回、久しぶりにnext.jsを触ったらfontの読み込みが変わっていました！！next.js13からfontの読み込み方法が変わったらしいですね。。。公式サイトに従えばサクッと使えるのですが、少し時間がかかってしまったため、ここにやり方を記録しておきます。

next.js13から提供されているfontの読み込み方法がnext/fontで、これをnext/fontを使うことで、ビルド時にfontファイルがダウンロードされ、パーフォーマンスが向上する、レイアウトシフトがなくなる。というのが、メリットということらしいです、、、。

公式サイト
https://nextjs.org/docs/app/building-your-application/optimizing/fonts

複数font family,font weightをつかう方法

基本的なnext/fontの使い方は、公式サイトを追っていけば使うことができます。けれど、font family,font weightを複数使用したいときの方法に関して、？？？となりました。

要は、フォントファミリーに関しては、それぞれのフォントファミリーにcss変数を設定できる。font-weightに関しては、配列で読み込んで、cssで書き分ける。という単純な話ですね。
fontと読み込んだ部分でcss変数を指定するのは、他のcss変数と管理の場所が分かれるので、少し嫌な気もしますが現在この方法しかわからないため、仕方ないですね、、、

ディレクトリ構造

src
|
|-font
   |-font.ts
|
|-page.tsx
|-page.module.scss

font.ts

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

const notoSansJP = Noto_Sans_JP({
  weight: ['400',"500", '700'],
  style: ['normal'],
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-noto-sans-jp',
});

const notoSerifJP = Noto_Serif_JP({
  weight: ['400',"500", '700'],
  style: ['normal'],
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-noto-serif-jp',
});


export { notoSansJP, notoSerifJP}

page.modules.scss

.headingLv1{
  font-family: var(--font-noto-sans-jp);
  font-weight: 700;
}

.headingLv2{
  font-family: var(--font-noto-sans-jp);
  font-weight: 500;
}

.headingLv3{
  font-family: var(--font-noto-sans-jp);
  font-weight: 400;
}

.headingLv4{
  font-family: var(--font-noto-serif-jp);
  font-weight: 700;
}

.headingLv5{
  font-family: var(--font-noto-serif-jp);
  font-weight: 500;
}
.headingLv6{
  font-family: var(--font-noto-serif-jp);
  font-weight: 400;
}

page.tsx

import styles from './page.module.scss'

export default function Home() {
  return (
    <main className={styles.main}>
      <h1 className={styles.headingLv1}>headingLv1</h1>
      <h2 className={styles.headingLv2}>headingLv2</h2>
      <h3 className={styles.headingLv3}>headingLv3</h3>
      <h4 className={styles.headingLv4}>headingLv4</h4>
      <h5 className={styles.headingLv5}>headingLv5</h5>
      <h6 className={styles.headingLv6}>headingLv6</h6>
      <p className={styles.pragraph}>pragraph</p>
      <ul className={styles.list}>
        <li className={styles.listItem}>listItem</li>
        <li className={styles.listItem}>listItem</li>
        <li className={styles.listItem}>listItem</li>
        <li className={styles.listItem}>listItem</li>
      </ul>
    </main>
  )
}

まとめ

next.jsでfont-family、font-weightを複数読み込んで使う方法でした。
ありがとうございました！