font-display コードジェネレーター
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はサーバーに送信されますか?
- いいえ。入力内容はブラウザ内でコード生成にのみ使われ、どこにも送信されません。