logoNext.js
ドキュメントブログ学習
はじめに/API リファレンス/コンポーネント/Font

Font モジュール

next/font はフォント（カスタムフォントを含む）を自動的に最適化し、プライバシーとパフォーマンス向上のために外部ネットワークリクエストを削除します。

ビルトインの自動セルフホスティング機能により、任意のフォントファイルを最適に読み込むことができます。これにより、レイアウトシフトを発生させることなくWebフォントを読み込めます。

また、すべてのGoogle Fontsを簡単に利用できます。CSSとフォントファイルはビルド時にダウンロードされ、他の静的アセットと共にセルフホストされます。ブラウザからGoogleへのリクエストは送信されません。

import { Inter } from 'next/font/google'

// 可変フォントを読み込む場合、フォントウェイトを指定する必要はありません
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

🎥 動画: next/font の使い方について詳しく学ぶ → YouTube (6分).

リファレンス

キーfont/googlefont/localタイプ必須
srcCross IconCheck IconString または Objectの配列Yes
weightCheck IconCheck IconString または ArrayRequired/Optional
styleCheck IconCheck IconString または Array-
subsetsCheck IconCross Icon文字列の配列-
axesCheck IconCross Icon文字列の配列-
displayCheck IconCheck IconString-
preloadCheck IconCheck IconBoolean-
fallbackCheck IconCheck Icon文字列の配列-
adjustFontFallbackCheck IconCheck IconBoolean または String-
variableCheck IconCheck IconString-
declarationsCross IconCheck IconObjectの配列-

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

フォントのウェイトを以下のいずれかで指定:

  • 特定のフォントで利用可能なウェイト値の文字列、または可変フォントの場合は値の範囲
  • 可変Googleフォントでない場合のウェイト値の配列（next/font/google のみ）

next/font/google と next/font/local で使用

例:

  • weight: '400': 単一のウェイト値（Interフォントの場合、'100', '200', '300', '400', '500', '600', '700', '800', '900' またはデフォルトの 'variable' が可能）
  • weight: '100 900': 可変フォントの 100 から 900 までの範囲
  • weight: ['100','400','900']: 可変フォントでない場合の3つの可能な値の配列

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 で指定されたフォントは、preload オプションが true（デフォルト）の場合、head にリンクプリロードタグが注入されます。

next/font/google で使用

  • オプション

例:

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

使用するフォントのすべてのサブセットのリストは、Google Fontsのページで確認できます。

axes

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

next/font/google で使用

  • オプション

例:

  • axes: ['slnt']: Inter 可変フォント用の slnt 値を含む配列（こちらで確認可能）。使用するフォントの可能な axes 値は、Google可変フォントページで wght 以外の軸をフィルタリングして確認できます

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 の場合: 文字列またはブール値 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%' }]

使用例

Google Fonts

Googleフォントを使用するには、next/font/google から関数としてインポートします。最高のパフォーマンスと柔軟性のために可変フォントの使用を推奨します。

import { Inter } from 'next/font/google'

// 可変フォントを読み込む場合、フォントウェイトを指定する必要はありません
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

可変フォントを使用できない場合は、ウェイトを指定する必要があります:

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

配列を使用して複数のウェイトやスタイルを指定できます:

app/layout.js
const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})

知っておくと便利: 複数の単語を含むフォント名にはアンダースコア（_）を使用します。例: Roboto Mono は Roboto_Mono としてインポートします。

サブセットの指定

Google Fontsは自動的にサブセット化されます。これによりフォントファイルのサイズが縮小され、パフォーマンスが向上します。プリロードするサブセットを定義する必要があります。preload が true の状態でサブセットを指定しないと、警告が表示されます。

関数呼び出しに追加することで指定できます:

const inter = Inter({ subsets: ['latin'] })

詳細についてはFont APIリファレンスを参照してください。

複数のフォントを使用する

アプリケーションで複数のフォントをインポートして使用できます。2つのアプローチがあります。

最初のアプローチは、フォントをエクスポートし、必要な場所でその className を適用するユーティリティ関数を作成する方法です。これにより、フォントがレンダリングされるときにのみプリロードされます:

import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})
import { inter } from './fonts'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}

上記の例では、Inter はグローバルに適用され、Roboto Mono は必要に応じてインポートして適用できます。

別の方法として、CSS変数を作成し、好みのCSSソリューションで使用できます:

import { Inter, Roboto_Mono } from 'next/font/google'
import styles from './global.css'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>My App</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}
app/global.css
html {
  font-family: var(--font-inter);
}

h1 {
  font-family: var(--font-roboto-mono);
}

上記の例では、Inter がグローバルに適用され、すべての <h1> タグは Roboto Mono でスタイルされます。

推奨事項: 新しいフォントはクライアントがダウンロードする追加リソースとなるため、複数のフォントは控えめに使用してください。

ローカルフォント

next/font/local をインポートし、ローカルフォントファイルの src を指定します。最高のパフォーマンスと柔軟性のために可変フォントを使用することを推奨します。

import localFont from 'next/font/local'

// フォントファイルは `app` 内に配置できます
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

単一のフォントファミリに対して複数のファイルを使用したい場合、src を配列にできます:

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
})

詳細についてはフォントAPIリファレンスを参照してください。

Tailwind CSSと一緒に使用

next/font はCSS変数を使用してTailwind CSSとシームレスに統合されます。

以下の例では、next/font/google から Inter と Roboto_Mono フォントを使用しています（任意のGoogleフォントまたはローカルフォントを使用できます）。variable オプションを使用してCSS変数名（例: inter と roboto_mono）を定義します。次に、inter.variable と roboto_mono.variable を適用してHTMLドキュメントにCSS変数を含めます。

知っておくと良いこと: これらの変数は、好みやスタイリングのニーズ、プロジェクトの要件に応じて <html> または <body> タグに追加できます。

import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html
      lang="en"
      className={`${inter.variable} ${roboto_mono.variable} antialiased`}
    >
      <body>{children}</body>
    </html>
  )
}

最後に、CSS変数をTailwind CSS設定に追加します:

Tailwind CSS v4

Tailwind v4 以降、デフォルトでは設定は不要です。設定が必要な場合は、公式ドキュメントに従ってグローバルCSSファイルを設定できます。

global.css
@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-inter);
  --font-mono: var(--font-roboto-mono);
}

Tailwind CSS v3

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

これで、font-sans と font-mono ユーティリティクラスを使用して要素にフォントを適用できます。

<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>

スタイルの適用

フォントスタイルは3つの方法で適用できます:

className

読み取り専用のCSS className を返し、HTML要素に渡します。

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

style

読み取り専用のCSS style オブジェクトを返し、フォントファミリー名とフォールバックフォントを含む style.fontFamily をHTML要素に渡します。

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

CSS変数

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

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

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 セレクタクラスを次のように定義します:

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 ファイルを作成します。

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

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' })
// stylesフォルダに格納されているGreatVibes-Regular.ttfのカスタムローカルフォントを定義
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 ファイルで次のようにパスエイリアスを定義できます:

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

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

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

プリロード

サイトのページでフォント関数が呼び出されると、それはグローバルに利用可能ではなく、すべてのルートでプリロードされません。代わりに、フォントは使用されるファイルのタイプに基づいて関連するルートでのみプリロードされます:

  • ユニークページの場合、そのページのユニークルートでプリロードされます。
  • レイアウトの場合、レイアウトでラップされたすべてのルートでプリロードされます。
  • ルートレイアウトの場合、すべてのルートでプリロードされます。

バージョン変更

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

コンポーネント

Next.js 組み込みコンポーネントの API リファレンス。

Form

フォーム送信とクライアントサイドナビゲーションによる検索パラメータ更新を`<Form>`コンポーネントで処理する方法について学びます。

On this page