next/fontはどのようにフォントを最適化しますか?

Question

Accepted Answer

`next/font` はウェブフォントを自動的に最適化してパフォーマンスを向上させ、レイアウトシフトを排除します — ビルド時にフォントを自分でホストし、ロードの詳細を処理します。 ## Google フォントを使用する ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## 自動的に実行される処理 - **セルフホスティング** — ビルド時に、Next は Google フォントをダウンロードし、**あなたの**ドメインから配信します。実行時に Google のサーバーへのリクエストなし → より高速で、プライバシーに優しい(サードパーティのトラッキングなし)。 - **レイアウトシフトなし** — フォールバックフォントのメトリクスを計算してウェブフォントと一致させるため、実際のフォントに交換されるときにテキストがジャンプしません(CLS を保護)。 - **プリロード & サブセッティング** — フォントをプリロードし、指定された文字サブセットのみを含めることで、ダウンロードを削減します。 - **レンダーブロッキングリクエストなし** — フォントはあなたのビルドの一部であり、ブロッキング外部フェッチではありません。 ## ローカルフォント ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## フォント最適化が重要な理由フォントは従来のパフォーマンスと CLS の問題です: テキスト描画をブロックするサードパーティフェッチ、その後フォントがロードされるとレイアウトジャンプが発生します(FOUT/FOIT)。これを手動で適切に実行するには、`@font-face`、`font-display`、プリロード、フォールバックメトリックのマッチングが必要です。 ## なぜ重要なのか `next/font` はフォントパフォーマンスチェックリスト全体を自動化します — セルフホスティング(速度 + プライバシー)、サブセッティングとプリロード(より小さく、より高速)、フォールバックメトリックのマッチング(レイアウトシフトなし) — すべて 1 つのインポートの背後にあります。扱いにくく、間違いやすい最適化を取り除き、Next.js で Google フォントとローカルフォントの両方を使用する推奨方法です。