フォントスタックビルダー

フォントスタックビルダーは、適切なフォールバックチェーンを持つCSS font-family宣言を作成するための無料のブラウザベースツールです。フォントスタックとは、 ブラウザがテキストをレンダリングする際に試行するフォントの順序付きリストです。 最初のフォントが利用できない場合、ブラウザは一致するフォントが見つかるか、 汎用ファミリーキーワードにフォールバックするまでリストの次のフォントに移ります。

適切なフォントスタックの選択は、デザインの一貫性とパフォーマンスの両方において 重要です。システムフォントスタックは、OSのネイティブ書体に依存することで 外部フォントのダウンロードを回避します。このアプローチはGitHub、Bootstrap、 WordPressなどの主要プロジェクトで使用されており、ページ読み込み時間を大幅に 削減します。一方、Google Fontsやその他のWebフォントを使用する場合でも、 フォントの読み込み中や失敗時にレイアウトが崩れないよう、堅実な フォールバックチェーンが必要です。

このツールでは、カテゴリ別のリスト（システムフォント、Webセーフフォント、 人気のGoogle Fonts、モノスペース、セリフ、サンセリフ）からフォントを選択したり、 カスタムフォント名を入力したりできます。ドラッグ&ドロップでフォントの 優先順位を変更し、serif、sans-serif、monospace、system-ui、 ui-monospaceなどの汎用ファミリーフォールバックを選択できます。 ライブプレビューパネルでは、フォントサイズ、ウェイト、行高、字間を調整 しながら、様々なコンテキスト（見出し、段落、コードブロック、ボタン）で テキストを確認できます。

CSSの単位変換が必要な場合は px ↔ remコンバーターをお試しください。 タイポグラフィに合う色選びには カラーコンバーターが便利です。 バニラCSSをユーティリティクラスに変換するには Tailwind CSSコンバーターをご確認ください。

すべての処理はブラウザ内で完結します。フォントデータやCSS出力が サーバーに送信されることはありません。

1. プリセットを選んで実績のあるフォントスタックから始めるか、ゼロから構築します。
2. ドロップダウンからフォントカテゴリ（System、Web-Safe、Google Fonts、Monospace、Serif、Sans-Serif）を選択します。
3. リストからフォントを選んでスタックに追加します。カスタムフォント名を入力してAddをクリックすることもできます。
4. スタックリストでフォントをドラッグ&ドロップして優先順位を変更するか、矢印ボタンを使用します。
5. スタックの末尾に追加する汎用ファミリーフォールバック（例：sans-serif、monospace）を選択します。
6. プレビュー設定でフォントサイズ、ウェイト、行高、字間を調整し、プレビューコンテキスト（段落、見出し、コード、ボタン）を切り替えます。
7. CopyをクリックするかCtrl+Shift+Cを押して、生成されたfont-family CSSプロパティをクリップボードにコピーします。