Tailwind Configでカスタムフォントファミリー
tailwind.config.jsでGoogle Fonts、システムフォント、フォールバックチェーンを含むカスタムフォントファミリースタックを設定します。
Fonts
詳細な説明
カスタムフォントファミリー
Tailwindは3つのデフォルトフォントファミリーユーティリティを提供します:font-sans、font-serif、font-mono。これらをカスタマイズしたり、まったく新しいものを追加できます。
デフォルトフォントスタックの上書き
カスタムフォント名を追加すると、font-display、font-body、font-codeなどのユーティリティが作成されます。
Next.jsフォント最適化との統合
next/fontを使用する場合、CSS変数アプローチと組み合わせます。
システムフォントスタック
外部フォントを読み込まずに、すべてのプラットフォームで一貫したレンダリングを保証する人気のフォールバックスタックがあります。
ユースケース
プロジェクトがGoogle Fonts、Adobe Fonts、またはローカルフォントファイルからのブランド固有のタイポグラフィを使用する場合にカスタムフォントファミリーを使用してください。