font-display コードジェネレーター
Webフォントの読み込み挙動（font-display）を比較して@font-faceコードを生成
CSSのfont-displayプロパティの値（auto、block、swap、fallback、optional）が実際にどう挙動が変わるのかを、視覚的なタイムラインで比較できるツールです。フォント名とURLを入力するだけで、選んだ値を反映した@font-faceコードをすぐに生成します。処理はすべてブラウザ内で完結しサーバーに送信されないため、フロントエンドエンジニアやマークアップ担当者がFOUT・FOIT・CLSの問題を理解し、最適な値を選ぶときに役立ちます。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- フォントファミリー名と、フォントファイルのURL（またはパス）を入力します。
- swap、block、fallback、optional、auto のうち、比較したいfont-displayの値をタブで選びます。
- ブロック期間・スワップ期間と読み込みタイムラインのグラフで、その値の挙動を確認します。
- 下部に自動生成された@font-faceコードをコピーボタンでコピーし、プロジェクトのCSSに貼り付けます。
よくある質問
- font-displayはどの値を選べばよいですか？
- 可読性を優先するならswap、レイアウトのずれ（CLS）を最小限に抑えたいならoptionalがよく推奨されます。ツールのタイムラインと解説を見比べて、サイトの状況に合う値を選んでください。
- 生成されたコードはそのまま使えますか？
- font-family、srcのパス、font-displayの値を反映した基本的な@font-faceルールが生成されます。異なるウェイトやスタイルを使う場合は、font-weightやfont-styleをプロジェクトに合わせて調整してください。
- 入力したフォントURLはサーバーに送信されますか？
- いいえ。入力値はブラウザ内でコードを組み立てるためだけに使われ、どこにも送信されません。