フォントモジュール

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

フォント関数引数

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

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 の場合、link preload タグが head に挿入されます。

next/font/googleで使用されます。

• オプション

例

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

使用しているフォントの Google Fonts ページで、すべてのサブセットのリストを見つけることができます。

axes

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

next/font/googleで使用されます。

• オプション

例

• axes: ['slnt']: こちらに示すように、追加の axes として slnt を持つ可変フォント Inter の値 slnt を含む配列です。 使用しているフォントの設定可能な axes 値を見つけるには、Google 可変フォントページのフィルターを使用して、wght 以外の axes を探します。

display

デフォルト値が 'swap' の、'auto'、'block'、'swap'、'fallback'、または 'optional' の文字列値が可能なフォント display。

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']: fallback フォントを 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',
})

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

<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か所でロードし、必要な場所で関連するフォントオブジェクトをインポートする必要があります。これは、フォント定義ファイルを使用して行います。

たとえば、アプリディレクトリのルートにあるstylesフォルダにfonts.tsファイルを作成します。

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

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'
 
// define your variable fonts
const inter = Inter()
const lora = Lora()
// define 2 weights of a non-variable font
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// define a custom local font where GreatVibes-Regular.ttf is stored in the styles folder
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}>Hello world using Inter font</p>
      <p style={lora.style}>Hello world using Lora font</p>
      <p className={sourceCodePro700.className}>
        Hello world using Source_Sans_3 font with weight 700
      </p>
      <p className={greatVibes.className}>My title in Great Vibes font</p>
    </div>
  )
}

コードでフォント定義にアクセスしやすくするために、tsconfig.jsonまたはjsconfig.jsonファイルでパスエイリアスを次のように定義できます

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

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

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

バージョンの変更