CSS @font-face 生成器
ローカルフォントファイルをWebフォントとして定義する標準のCSS宣言文を自動作成
カスタムフォントを自身のウェブサイトで読み込むための、ブラウザ互換性の高いCSS設定をビルドします。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- フォント名（Font Family Name）を入力します。
- フォントファイルの公開パス（woff2, woff, ttf）を入力します。
- 太さや斜体設定を選択し、生成されたCSSコードをコピーします。
よくある質問
- font-displayとは何ですか？
- フォント読み込み中のテキスト表示挙動を制御するもので、通常は「swap」が推奨されます。
- RegularやBoldのように太さが異なる複数のフォントファイルを一度に登録するにはどうすればいいですか?
- このツールは一度に1つの@font-faceブロックしか生成しないため、太さ(weight)ごとにファイルパスとfont-weightの値を変えながら複数回生成し、その結果を並べてつなげてください。同じfont-family名の下でRegularをfont-weight: 400、Boldを700のように設定すれば、ブラウザが太さに応じて適切なファイルを自動で選んでくれます。
- RegularやBoldのように太さが異なる複数のフォントファイルを一度に登録するにはどうすればいいですか?
- このツールは一度に1つの@font-faceブロックしか生成しないため、太さ(weight)ごとにファイルパスとfont-weightの値を変えながら複数回生成し、その結果を並べてつなげてください。同じfont-family名の下でRegularをfont-weight: 400、Boldを700のように設定すれば、ブラウザが太さに応じて適切なファイルを自動で選んでくれます。