Font モジュール

このAPIリファレンスでは、next/font/google と next/font/local の使用方法を理解するのに役立ちます。機能と使用方法については、フォントの最適化 ページを参照してください。

フォント関数の引数

使用方法については、Google Fonts と ローカルフォント を確認してください。

src

フォントファイルのパスを文字列またはオブジェクトの配列（Array<{path: string, weight?: string, style?: string}> タイプ）で指定します。フォントローダー関数が呼び出されるディレクトリからの相対パスです。

next/font/local で使用

• 必須

例:

• src:'./fonts/my-font.woff2' - my-font.woff2 は app ディレクトリ内の fonts ディレクトリに配置
• src:[{path: './inter/Inter-Thin.ttf', weight: '100',},{path: './inter/Inter-Regular.ttf',weight: '400',},{path: './inter/Inter-Bold-Italic.ttf', weight: '700',style: 'italic',},]
• フォントローダー関数が app/page.tsx で呼び出され、src:'../styles/fonts/my-font.ttf' を使用する場合、my-font.ttf はプロジェクトルートの styles/fonts に配置

weight

フォントの weight を指定します。以下の可能性があります:

• 特定のフォントで利用可能なウェイト値の文字列、または 可変フォント の場合は値の範囲
• 可変Googleフォント でない場合のウェイト値の配列（next/font/google のみに適用）

next/font/google と next/font/local で使用

• 使用するフォントが 可変フォント でない場合は必須

例:

• weight: '400': 単一のウェイト値の文字列 - Inter フォントの場合、可能な値は '100', '200', '300', '400', '500', '600', '700', '800', '900' または 'variable'（デフォルトは 'variable'）
• weight: '100 900': 可変フォントの 100 から 900 までの範囲を指定する文字列
• weight: ['100','400','900']: 可変フォントでない場合の3つの可能な値の配列

style

フォントの style を指定します。以下の可能性があります:

• デフォルト値が 'normal' の文字列 値
• 可変Googleフォント でない場合のスタイル値の配列（next/font/google のみに適用）

next/font/google と next/font/local で使用

• オプショナル

例:

• style: 'italic': 文字列 - next/font/google の場合は normal または italic を指定可能
• style: 'oblique': 文字列 - next/font/local の場合は任意の値を指定可能ですが、標準フォントスタイル からの値が期待されます
• style: ['italic','normal']: next/font/google 用の2つの値の配列 - 値は normal と italic から選択

subsets

フォントの subsets を文字列値の配列で定義します。各サブセットの名前を指定すると、プリロード されます。subsets で指定されたフォントは、preload オプションが true（デフォルト）の場合、head にリンクプリロードタグが挿入されます。

next/font/google で使用

• オプショナル

例:

• subsets: ['latin']: latin サブセットを含む配列

使用するフォントのすべてのサブセットのリストは、Google Fonts ページで確認できます。

axes

一部の可変フォントには、追加の axes を含めることができます。デフォルトでは、ファイルサイズを小さく保つためにフォントウェイトのみが含まれます。axes の可能な値は、特定のフォントによって異なります。

next/font/google で使用

• オプショナル

例:

• axes: ['slnt']: Inter 可変フォントの追加 axes として slnt を指定する配列（こちら で確認可能）。フォントの可能な axes 値は、Google可変フォントページ で wght 以外の軸をフィルタリングして確認できます

display

フォントの display を指定します。可能な文字列 値 は 'auto', 'block', 'swap', 'fallback', 'optional' で、デフォルト値は 'swap' です。

next/font/google と next/font/local で使用

• オプショナル

例:

• display: 'optional': optional 値を指定した文字列

preload

フォントを プリロード するかどうかを指定するブール値。デフォルトは true です。

next/font/google と next/font/local で使用

• オプショナル

例:

• preload: false

fallback

フォントが読み込めない場合に使用するフォールバックフォント。デフォルトはありません。フォールバックフォントの文字列配列を指定します。

• オプショナル

next/font/google と next/font/local で使用

例:

• fallback: ['system-ui', 'arial']: フォールバックフォントを system-ui または arial に設定する配列

adjustFontFallback

• next/font/google の場合: 累積レイアウトシフト (CLS) を減らすために自動フォールバックフォントを使用するかどうかを指定するブール値。デフォルトは true。
• next/font/local の場合: 累積レイアウトシフト (CLS) を減らすために自動フォールバックフォントを使用するかどうかを指定する文字列またはブール値 false。可能な値は 'Arial', 'Times New Roman' または false。デフォルトは 'Arial'。

next/font/google と next/font/local で使用

• オプショナル

例:

• adjustFontFallback: false: next/font/google 用
• adjustFontFallback: 'Times New Roman': next/font/local 用

variable

CSS変数メソッド でスタイルを適用する場合に使用するCSS変数名を定義する文字列値。

next/font/google と next/font/local で使用

• オプショナル

例:

• variable: '--my-font': CSS変数 --my-font が宣言されます

declarations

生成される @font-face をさらに定義するフォントフェース 記述子 のキーと値のペアの配列。

next/font/local で使用

• オプショナル

例:

• declarations: [{ prop: 'ascent-override', value: '90%' }]

スタイルの適用

フォントスタイルは以下の3つの方法で適用できます:

• className
• style
• CSS変数

className

読み込まれたフォントの読み取り専用CSS className を返し、HTML要素に渡します。

<p className={inter.className}>Hello, Next.js!</p>

style

読み込まれたフォントの読み取り専用CSS style オブジェクトを返し、HTML要素に渡します。フォントファミリー名とフォールバックフォントにアクセスするための style.fontFamily が含まれます。

<p style={inter.style}>Hello World</p>

CSS変数

外部スタイルシートでスタイルを設定し、追加のオプションを指定する場合は、CSS変数メソッドを使用します。

フォントをインポートするだけでなく、CSS変数が定義されているCSSファイルもインポートし、フォントローダーオブジェクトの変数オプションを以下のように設定します:

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

フォントを使用するには、スタイルを適用したいテキストの親コンテナの className をフォントローダーの variable 値に設定し、テキストの className を外部CSSファイルの styles プロパティに設定します。

<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>

<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>

component.module.css CSSファイルで text セレクタクラスを以下のように定義します:

.text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}

上記の例では、Hello World というテキストが Inter フォントと生成されたフォントフォールバックを使用してスタイルされ、font-weight: 200 と font-style: italic が適用されます。

フォント定義ファイルの使用

localFont またはGoogleフォント関数を呼び出すたびに、そのフォントはアプリケーション内で1つのインスタンスとしてホストされます。したがって、同じフォントを複数の場所で使用する必要がある場合は、1つの場所でロードし、関連するフォントオブジェクトを必要な場所にインポートする必要があります。これはフォント定義ファイルを使用して行われます。

例えば、app ディレクトリのルートに styles フォルダを作成し、fonts.ts ファイルを作成します。

次に、フォント定義を以下のように指定します:

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// 可変フォントを定義
const inter = Inter()
const lora = Lora()
// 非可変フォントの2つのウェイトを定義
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// stylesフォルダにGreatVibes-Regular.ttfが保存されているカスタムローカルフォントを定義
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// 可変フォントを定義
const inter = Inter()
const lora = Lora()
// 非可変フォントの2つのウェイトを定義
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// stylesフォルダにGreatVibes-Regular.ttfが保存されているカスタムローカルフォントを定義
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

これらの定義をコードで以下のように使用できます:

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>Interフォントを使用したHello world</p>
      <p style={lora.style}>Loraフォントを使用したHello world</p>
      <p className={sourceCodePro700.className}>
        ウェイト700のSource_Sans_3フォントを使用したHello world
      </p>
      <p className={greatVibes.className}>Great Vibesフォントのタイトル</p>
    </div>
  )
}

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>Interフォントを使用したHello world</p>
      <p style={lora.style}>Loraフォントを使用したHello world</p>
      <p className={sourceCodePro700.className}>
        ウェイト700のSource_Sans_3フォントを使用したHello world
      </p>
      <p className={greatVibes.className}>Great Vibesフォントのタイトル</p>
    </div>
  )
}

コード内でフォント定義に簡単にアクセスできるようにするために、tsconfig.json または jsconfig.json ファイルでパスエイリアスを以下のように定義できます:

{
  "compilerOptions": {
    "paths": {
      "@/fonts": ["./styles/fonts"]
    }
  }
}

これで、以下のように任意のフォント定義をインポートできます:

import { greatVibes, sourceCodePro400 } from '@/fonts'

import { greatVibes, sourceCodePro400 } from '@/fonts'

バージョン変更