コンテンツにスキップ
API ReferenceComponentsFont

Font Module

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

これにより、フォントファイルを自動でセルフホストできます。これにより、レイアウトシフトなしでウェブフォントを最適に読み込むことができます。

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

app/layout.tsx
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'],
  display: 'swap',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

🎥 Watch: next/font の使用方法についてさらに詳しく → YouTube (6分)。

リファレンス

Keyfont/googlefont/localタイプ必須
srcString or Array of Objectsはい
weightString or ArrayRequired/Optional
styleString or Array-
subsetsArray of Strings-
axesArray of Strings-
display文字列-
プリロードブーリアン-
fallbackArray of Strings-
adjustFontFallbackBoolean or String-
variable文字列-
declarationsArray 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 はプロジェクトのルートにある 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' を持つ、CSS の値を示す文字列。
  • フォントが可変 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 値を含む配列。Inter は、こちら に示されているように、追加の axes として slnt を持っています。wght 以外の軸を探すことで、Google の可変フォントページ のフィルターを使用して、フォントの可能な 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 の場合: 累積レイアウトシフト (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 Variables メソッドでスタイルが適用される場合に、使用される 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 から関数としてインポートします。パフォーマンスと柔軟性を最大化するために、可変フォント の使用をお勧めします。

app/layout.tsx
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'],
  display: 'swap',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

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

app/layout.tsx
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 フォントは自動的にサブセット化されます。これによりフォントファイルのサイズが削減され、パフォーマンスが向上します。プリロードするサブセットを定義する必要があります。preload が true の場合にサブセットを指定しないと、警告が表示されます。

これは、関数呼び出しにサブセットを追加することで実行できます。

app/layout.tsx
const inter = Inter({ subsets: ['latin'] })

詳細については、Font API Reference を参照してください。

複数フォントの使用

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

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

app/fonts.ts
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',
})
app/layout.tsx
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>
  )
}
app/page.tsx
import { roboto_mono } from './fonts'
 
export default function Page() {
  return (
    <>
      <h1 className={roboto_mono.className}>My page</h1>
    </>
  )
}

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

または、CSS 変数を作成し、好みの CSS ソリューションで使用することもできます。

app/layout.tsx
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 を指定します。パフォーマンスと柔軟性を最大化するために、可変フォント の使用をお勧めします。

app/layout.tsx
import localFont from 'next/font/local'
 
// Font files can be colocated inside of `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',
    },
  ],
})

詳細については、Font API Reference を参照してください。

Tailwind CSS と共に

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

以下の例では、next/font/google から Inter と Roboto_Mono フォントを使用しています (任意の Google Font または Local Font を使用できます)。variable オプションを使用して、これらのフォントの inter と roboto_mono のような CSS 変数名を定義します。その後、inter.variable と roboto_mono.variable を適用して、CSS 変数を HTML ドキュメントに含めます。

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

app/layout.tsx
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 config に追加します。

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 も含まれます。

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

CSS Variables

スタイルを外部スタイルシートで設定し、追加オプションをそこに指定したい場合は、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 つの場所でロードし、関連するフォントオブジェクトを必要な場所にインポートする必要があります。これはフォント定義ファイルを使用して行います。

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

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

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 }

これで、これらの定義をコード内で以下のように使用できます。

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'

プリロード

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

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

バージョン変更履歴

バージョン変更履歴
v13.2.0@next/font は next/font にリネームされました。インストールは不要になりました。
v13.0.0@next/font が追加されました。