メインコンテンツまでスキップ

Fontモジュール

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

Font 関数の引数

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

Keyfont/googlefont/local必須
src×String または Object の配列Yes
weightString または 配列Required/Optional
styleString または 配列-
subsets×String 配列-
axes×String 配列-
displayString-
preloadBoolean-
fallbackString 配列-
adjustFontFallbackBoolean または String-
variableString-
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.tsxsrc:'../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 つの値の配列 - 値はnormalitalic

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: falsenext/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

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 WorldInterフォントと生成されたフォールバック・フォントを使ってfont-weight: 200font-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'

バージョン履歴

VersionChanges
v13.2.0@next/fontnext/fontに変更。インストールが不要になりました。
v13.0.0next/font追加