フォントの最適化

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

あらゆるフォントファイルを組み込みのセルフホスティングで利用できます。これにより、レイアウトシフトなしでウェブフォントを最適に読み込むことができます。

next/fontの使用を開始するには、next/font/localまたはnext/font/googleからインポートし、適切なオプションを指定して関数として呼び出し、フォントを適用したい要素のclassNameを設定します。例：

import { Geist } from 'next/font/google'
 
const geist = Geist({
  subsets: ['latin'],
})
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

フォントは、使用されているコンポーネントにスコープされます。アプリケーション全体にフォントを適用するには、ルートレイアウトに追加してください。

Googleフォント

Googleフォントはすべて自動的にセルフホスティングできます。フォントは静的アセットとして保存され、デプロイメントと同じドメインから配信されるため、ユーザーがサイトにアクセスしたときにブラウザからGoogleにリクエストが送信されることはありません。

Googleフォントの使用を開始するには、next/font/googleから使用したいフォントをインポートします。

import { Geist } from 'next/font/google'
 
const geist = Geist({
  subsets: ['latin'],
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

パフォーマンスと柔軟性の向上のために、可変フォントの使用をお勧めします。ただし、可変フォントが使用できない場合は、ウェイトを指定する必要があります。

import { Roboto } from 'next/font/google'
 
const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

ローカルフォント

ローカルフォントを使用するには、next/font/localからフォントをインポートし、ローカルフォントファイルのsrcを指定します。フォントはpublicフォルダに保存するか、appフォルダ内に共置できます。例：

import localFont from 'next/font/local'
 
const myFont = localFont({
  src: './my-font.woff2',
})
 
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リファレンス

Next.jsフォントの全機能については、APIリファレンスを参照してください。

Font

組み込みの`next/font`ローダーを使用してウェブフォントの読み込みを最適化します。