フォント読み込みCSS生成機
@font-face CSSと任意のpreloadマークアップを作り、font-display設定の抜けを防ぎます。
このツールについて
font-displayやcrossorigin preloadなどの細かな設定を忘れず、本番用フォント読み込みコードを作れます。
リモートフォント提供元からセルフホストWOFF2へ移行し、性能を直接管理したい時に便利です。
結果
使い方
- 1
必要な値を入力するか、テキストを貼り付けます。
- 2
オプションや単位を目的に合わせて調整します。
- 3
表示された結果を確認し、必要な場所へコピーして使います。
機能
即時結果
値を入力するとブラウザ内で結果がすぐに更新されます。
ブラウザ内処理
入力値はサーバーへアップロードせず、端末内で処理されます。
シンプルな入力
繰り返し使いやすい入力欄と見やすい結果を用意しています。
無料で利用
登録やインストールなしでそのまま使えます。
主な用途
- ›セルフホストフォント用の@font-face CSSを作ります。
- ›最初の画面に必要なフォント1つだけをpreloadするマークアップを生成します。
- ›swap、optional、fallback、block、autoの挙動を選びます。