Fontモジュール

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

Font 関数の引数

使用方法については、Google FontsとLocal Fontsを参照してください。

Key	`font/google`	`font/local`	型	必須
`src`	×	✅	String または Object の配列	Yes
`weight`	✅	✅	String または配列	Required/Optional
`style`	✅	✅	String または配列	-
`subsets`	✅	×	String 配列	-
`axes`	✅	×	String 配列	-
`display`	✅	✅	String	-
`preload`	✅	✅	Boolean	-
`fallback`	✅	✅	String 配列	-
`adjustFontFallback`	✅	✅	Boolean または String	-
`variable`	✅	✅	String	-
`declarations`	×	✅	Object 配列	-

`src`

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

next/font/localで使用：

必須

例：

appディレクトリ内のfontsというディレクトリにmy-font.woff2が置かれた場合、src:'./fonts/my-font.woff2'

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（デフォルト）のときは、リンクpreloadタグが head に注入されます。

next/font/googleで使用：

任意

例：

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

すべてのサブセットの一覧は、フォントの Google Fonts ページで見ることができます

`axes`

一部の可変フォントには、axesを含められるものがあります。デフォルトでは、フォントのウェイトだけが含まれています。可能なaxesの値は特定のフォントに依存します。

next/font/googleで使用：

オプション

例：

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

`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の場合：累積レイアウトシフトを減らすために自動フォールバックフォントを使うかどうかを設定するブール値。デフォルトはtrue
next/font/localの場合：累積レイアウトシフトを軽減するために自動で予備フォントを用いるかどうかを設定する文字列または論理値。とりうる値は'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 要素に渡される、読み込まれたフォントの読み取り専用の CSSstyleオブジェクトを返します。フォントファミリー名とフォールバックフォントにアクセスするためのstyle.fontFamilyを含みます。

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

CSS 変数

外部スタイル・シートにスタイルを設定し、そこに追加オプションを指定したい場合は、CSS 変数によるスタイリングを使用します。

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

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

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

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

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

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

そして、以下のようにフォント定義を指定します：

styles.font.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をstylesフォルダに格納し、カスタムローカルフォントを定義する
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

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

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

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>
  )
}

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

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

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

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

バージョン履歴

Version	Changes
`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 変数​

フォント定義ファイルを使用する​

バージョン履歴​

Font 関数の引数

`src`

`weight`

`style`

`subsets`

`axes`

`display`

`preload`

`fallback`

`adjustFontFallback`

`variable`

`declarations`

スタイルの適用

`className`

`style`

CSS 変数

フォント定義ファイルを使用する

バージョン履歴