next/font はウェブフォントを自動的に最適化してパフォーマンスを向上させ、レイアウトシフトを排除します — ビルド時にフォントを自分でホストし、ロードの詳細を処理します。
Google フォントを使用する
tsx
{ } ;
inter = ({
: [],
: ,
});
() {
(
);
}
next/font はウェブフォントを自動的に最適化してパフォーマンスを向上させ、レイアウトシフトを排除します — ビルド時にフォントを自分でホストし、ロードの詳細を処理します。
{ } ;
inter = ({
: [],
: ,
});
() {
(
);
}
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 フォントとローカルフォントの両方を使用する推奨方法です。