Font Module

このAPIリファレンスは、next/font/google と next/font/local の使用方法を理解するのに役立ちます。機能と使用法については、Optimizing Fonts ページをご覧ください。

Font 関数の引数

使用法については、Google Fonts と Local Fonts を確認してください。

項目名	種類	必須
`src`	String または Array of Objects	Yes
`weight`	String または Array	必須/任意
`style`	String または Array	-
`subsets`	Array of Strings	-
`axes`	Array of Strings	-
`display`	String	-
`preload`	Boolean	-
`fallback`	Array of Strings	-
`adjustFontFallback`	Boolean または String	-
`variable`	String	-
`declarations`	Array of Objects	-

`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 はプロジェクトの root にある styles/fonts に配置されます

`weight`

weightには次の可能性があります：

特定のフォントに利用可能な weight の値、または variable フォントの場合は範囲の値である可能性のある文字列
フォントが variable google font でない場合の weight 値の配列。これは next/font/google のみに適用されます。

next/font/google と next/font/local で使用されます

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

例:

weight: '400': 単一の weight 値の文字列 - フォント Inter の場合、値は '100', '200', '300', '400', '500', '600', '700', '800', '900' または 'variable' である可能性があります（デフォルトは 'variable'）
weight: '100 900': variable フォントに対して 100 と 900 の間の範囲の文字列
weight: ['100','400','900']: 非 variable フォントに対する3つの可能な値の配列

`style`

style には次の可能性があります：

デフォルト値が 'normal' の value を持つ文字列
フォントが variable google font でない場合、スタイル値の配列。これは 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`

一部のvariableフォントは追加の axes を含むことができます。デフォルトでは、ファイルサイズを抑えるために、フォントのweightのみが含まれます。axesの可能な値は特定のフォントに応じて決まります。

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

任意

例:

axes: ['slnt']: Inter variable フォントに対する値 slnt を持つ配列であり、slntを追加のaxesとして持っていることがここに示されています。axesの可能な値は、Google variable fontsページのフィルターを使用し、wght以外のaxesを探すことで見つけることができます。

`display`

フォント display に対する可能な文字列 values には、デフォルトの値 'swap' 語に対し'auto', 'block', 'swap', 'fallback', 'optional' のいずれかを使用できます。

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 の場合：累積レイアウトシフトを削減するために自動フォールバックフォントを使用するかどうかを設定する論理値。デフォルトは true です。
next/font/local の場合：累積レイアウトシフトを削減するために自動フォールバックフォントを使用するかどうかを設定する文字列または 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%' }]

スタイルの適用

フォントスタイルは次の方法で適用できます：

className
style
CSS Variables

`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 Variables

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

フォントをインポートするのに加えて、CSS変数が定義されているCSSファイルをインポートし、下記のようにフォントローダーオブジェクトの変数オプションを設定します：

TypeScript
JavaScript

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

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

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

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

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

TypeScript
JavaScript

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

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

component.module.css CSSファイルに text セレクタークラスを次のように定義します：

styles/component.module.css
.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 ファイルをアプリディレクトリのrootに作成します。

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

TypeScript
JavaScript

styles/fonts.ts
import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// variable フォントを定義
const inter = Inter()
const lora = Lora()
// 非 variable フォントの2つの weight を定義
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 }

styles/fonts.js
import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// variable フォントを定義
const inter = Inter()
const lora = Lora()
// 非 variable フォントの2つの weight を定義
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 }

これらの定義を次のようにコードで使用できます：

TypeScript
JavaScript

app/page.tsx
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>
  )
}

app/page.js
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 ファイルで次のようにパスエイリアスを定義できます：

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

次のようにしてフォント定義をインポートできるようになります：

TypeScript
JavaScript

app/about/page.tsx
import { greatVibes, sourceCodePro400 } from '@/fonts'

app/about/page.js
import { greatVibes, sourceCodePro400 } from '@/fonts'

バージョン履歴による変更

バージョン	変更内容
`v13.2.0`	`@next/font` は `next/font` に名前が変更されました。インストールは不要になりました。
`v13.0.0`	`@next/font` が追加されました。

Font 関数の引数​

src​

weight​

style​

subsets​

axes​

display​

preload​

fallback​

adjustFontFallback​

variable​

declarations​

スタイルの適用​

className​

style​

CSS Variables​

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

バージョン履歴による変更​

Font 関数の引数

`src`

`weight`

`style`

`subsets`

`axes`

`display`

`preload`

`fallback`

`adjustFontFallback`

`variable`

`declarations`

スタイルの適用

`className`

`style`

CSS Variables

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

バージョン履歴による変更