@font-face CSSジェネレーター
フォント名・ウェイト・パスを入力してWOFF2/WOFF/TTFの@font-faceコードを即生成
Webフォントを適用するたびに手書きしていた@font-faceルールを、フォームに値を入れるだけで生成できるツールです。フォント名、ウェイト、スタイルとWOFF2・WOFF・TTFファイルのパスを入力すると、ブラウザ互換性を考慮した標準的なCSSコードがリアルタイムで作られます。処理はすべてブラウザ内で完結し、サーバーには送信されません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- フォントファミリー名とウェイト（Weight）、スタイル（Normal/Italic）を選びます。
- WOFF2、WOFF、TTF それぞれのファイルのパス（URL）を入力します。
- 下部にリアルタイムで生成される@font-faceのCSSコードを確認します。
- コピーボタンを押して、そのままスタイルシートに貼り付けます。
よくある質問
- このツールは実際にTTFからWOFFへフォントファイルを変換してくれますか？
- いいえ、ファイル形式そのものの変換は行いません。すでに用意されたWOFF2/WOFF/TTFファイルのパスを指定すると、それらを読み込む標準的な@font-faceのCSSコードを生成するツールです。
- WOFF2、WOFF、TTFをすべて指定する必要があるのはなぜですか？
- ブラウザごとに対応形式が異なるため、フォールバックチェーンを組むのがWeb標準の慣習です。最新ブラウザは最も軽量なWOFF2を使い、非対応の古い環境では順にWOFF、TTFへフォールバックします。
- 生成されたコードはそのまま使えますか？
- はい。font-display: swap を含む標準的な形式なので、修正なしでCSSファイルに貼り付けてすぐに利用できます。