Fontモジュール

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

これにより、フォントファイルは **自動的にセルフホスト** されます。これは、Webフォントをレイアウトシフトなしで最適に読み込めることを意味します。レイアウトシフト

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

すべてのページでフォントを使用するには、以下のように /pages ディレクトリの下にある _app.js ファイル に追加してください。

import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

🎥 ウォッチ: next/font の使用方法についてさらに詳しく学ぶ → YouTube (6分)。

リファレンス

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

フォントのsubsets。プリロードしたい各サブセットの名前の文字列配列で定義されます。subsets で指定されたフォントは、preload オプションが true（デフォルト）の場合に head に link preload タグが挿入されます。

next/font/google で使用

• オプション

例

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

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

axes

一部の可変フォントには、追加できる axes があります。デフォルトでは、ファイルサイズを小さく保つために、フォントの太さのみが含まれています。axes の可能な値は、特定のフォントによって異なります。

next/font/google で使用

• オプション

例

• axes: ['slnt']: Inter 可変フォントの slnt という追加 axes を含む配列。これは こちら に示されています。フォントの可能な axes 値は、Google可変フォントページ で wght 以外の軸をフィルタリングすることで確認できます。

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 の場合: 自動フォールバックフォントを使用して 累積レイアウトシフト (CLS) を削減するかどうかを設定するブール値。デフォルトは true です。
• next/font/local の場合: 自動フォールバックフォントを使用して 累積レイアウトシフト (CLS) を削減するかどうかを設定する文字列またはブール値 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 をさらに定義する、フォントフェイス descriptor のキーと値のペア。

next/font/local で使用

• オプション

例

• declarations: [{ prop: 'ascent-override', value: '90%' }]

例

Google Fonts

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

すべてのページでフォントを使用するには、以下のように /pages ディレクトリの下にある _app.js ファイル に追加してください。

import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

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

import { Roboto } from 'next/font/google'
 
const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  )
}

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

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

知っておくと良いこと: 複数の単語からなるフォント名にはアンダースコア (_) を使用してください。例: Roboto Mono は Roboto_Mono としてインポートする必要があります。

<head> でフォントを適用する

ラッパーと className なしでフォントを使用することもできます。以下のように <head> に注入します。

import { Inter } from 'next/font/google'
 
const inter = Inter({ subsets: ['latin'] })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${inter.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  )
}

単一ページでの使用

単一のページでフォントを使用するには、以下のようにそのページに追加します。

import { Inter } from 'next/font/google'
 
const inter = Inter({ subsets: ['latin'] })
 
export default function Home() {
  return (
    <div className={inter.className}>
      <p>Hello World</p>
    </div>
  )
}

サブセットの指定

Googleフォントは自動的にサブセット化されます。これによりフォントファイルのサイズが削減され、パフォーマンスが向上します。プリロードしたいサブセットを指定する必要があります。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',
})

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

または、CSS変数を作成し、好みの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'
 
// Font files can be colocated inside of `pages`
const myFont = localFont({ src: './my-font.woff2' })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}

単一のフォントファミリーに複数のファイルを使用したい場合は、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',
    },
  ],
})

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

Tailwind CSS と一緒に

next/font は、Tailwind CSS と、CSS変数を使用してシームレスに連携します。

以下の例では、next/font/google から Inter と Roboto_Mono フォントを使用しています（Googleフォントまたはローカルフォントのいずれでも使用できます）。variable オプションを使用して、これらのフォントのそれぞれに対して inter および roboto_mono のようなCSS変数名を定義します。その後、inter.variable と roboto_mono.variable を適用して、CSS変数をHTMLドキュメントに含めます。

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

import { Inter } from 'next/font/google'
 
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})
 
const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${inter.variable} ${roboto_mono.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

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

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

Tailwind CSS v3

/** @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
• style
• CSS変数

className

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

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

style

読み取り専用のCSS style オブジェクトを返します。これをHTML要素に渡して、読み込まれたフォントを適用します。style.fontFamily を使用してフォントファミリー名とフォールバックフォントにアクセスできます。

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

.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'
 
// define your variable fonts
const inter = Inter()
const lora = Lora()
// define 2 weights of a non-variable font
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// define a custom local font where GreatVibes-Regular.ttf is stored in the styles folder
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}>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 ファイルにパスエイリアスを定義できます。

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

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

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

プリロード

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

• それがユニークなページであれば、そのページのユニークなルートでプリロードされます。
• それがカスタムApp内であれば、/pages の下にあるサイトのすべてのルートでプリロードされます。

バージョン変更履歴