前の記事次の記事 Google Fontsで学ぶWebフォントの基本 Webフォント/アイコンフォント第4回 next/font/googleの基本動作Next.js組み込みのフォント最適化モジュールnext/font/googleを取り上げます。Next.jsがWebフォントの読み込みに介入する理由と、基本的な使い方、自動最適化の仕組みについて解説します。2026年03月12日(670号)藤田 智朗フロントエンド・エンジニア 目次 はじめに Next.jsがWebフォントに介入する理由 外部リクエストのオーバーヘッド プライバシーの懸念 フォント読み込みの最適化が手動 Next.jsのアプローチ next/font/googleの基本的な使い方 フォントの定義 フォントの適用 生成されるCSSとクラス名 オプションの設定 自動的に設定されるfont-display: swap displayオプションの変更 フォントのセルフホスト化とビルド成果物 ビルド時に何が起きるか ビルド成果物の確認 本番環境での配信 DevToolsでの確認 まとめ シェア この記事を読むには購読の手続きが必要です購読の手続きへ購読済みの方はログイン月額880円(税込)初めてお申し込みの方は、30日間無料でお使いいただけます