Tailwind Configでカスタムフォントファミリー

tailwind.config.jsでGoogle Fonts、システムフォント、フォールバックチェーンを含むカスタムフォントファミリースタックを設定します。

Fonts

詳細な説明

カスタムフォントファミリー

Tailwindは3つのデフォルトフォントファミリーユーティリティを提供します:font-sansfont-seriffont-mono。これらをカスタマイズしたり、まったく新しいものを追加できます。

デフォルトフォントスタックの上書き

カスタムフォント名を追加すると、font-displayfont-bodyfont-codeなどのユーティリティが作成されます。

Next.jsフォント最適化との統合

next/fontを使用する場合、CSS変数アプローチと組み合わせます。

システムフォントスタック

外部フォントを読み込まずに、すべてのプラットフォームで一貫したレンダリングを保証する人気のフォールバックスタックがあります。

ユースケース

プロジェクトがGoogle Fonts、Adobe Fonts、またはローカルフォントファイルからのブランド固有のタイポグラフィを使用する場合にカスタムフォントファミリーを使用してください。

試してみる — Tailwind Config Builder

フルツールを開く