フォントモジュール

この 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

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

next/font/google で使用

• オプション

例：

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

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

axes

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

next/font/google で使用

• オプション

例：

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

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']：フォールバックフォントを system-ui または arial に設定する配列

adjustFontFallback

• next/font/googleの場合：Cumulative Layout Shiftを削減するための、自動フォールバックフォントを使用するかどうかを設定するブール値。デフォルトはtrueです。
• next/font/localの場合：Cumulative Layout Shiftを削減するための、自動フォールバックフォントを使用するかどうかを設定する文字列または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

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

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

style

読み込まれたフォントのHTML要素に渡すための、読み取り専用のCSS style オブジェクトを返します。フォントファミリー名とフォールバックフォントにアクセスするための 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'
 
// 可変フォントを定義
const inter = Inter()
const lora = Lora()
// 非可変フォントの2つのウェイトを定義
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// GreatVibes-Regular.ttfがstyleフォルダに保存されているカスタムローカルフォントを定義
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' })
// GreatVibes-Regular.ttfがstyleフォルダに保存されているカスタムローカルフォントを定義
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>
  )
}

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

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

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

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

バージョンの変更