@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ファイルへ貼り付けてすぐ使用できます。