@font-faceジェネレーター

@font-faceジェネレーター: 用途

Google Fontsに頼らずに独自フォントをサイトで使うには、ファイルをホストして、それぞれを@font-faceで宣言する必要があります。太さを間違えたり、font-displayを忘れたりすると、読み込み中にテキストが見えなくなったり、擬似的な太字になったりします。

ファイルを選ぶと、ツールが名前（Regular、Bold、SemiBold、Italic、700、可変）から太さとスタイルを判別し、同じバリエーションの形式をまとめて、font-display: swap付きのルールと、最初の画面で使うフォント用のcrossorigin付きpreloadタグを生成し、実際のフォントでプレビューを表示します。

使い方

1. フォントのファイルを選びます。
2. ファミリー名、太さ、フォルダーを確認します。
3. CSSとpreloadタグをコピーします。

使うタイミング

• ブランドのフォントをサイトで使う。
• Google Fontsの代わりにフォントをホストする。
• 太字が正しく表示されないフォントを直す。

よくある質問

どのフォント形式を使えばよいですか？

WOFF2です。圧縮されていて、現在のすべてのブラウザが対応しているので、ほとんどのサイトではこれだけで十分です。TTFやOTFも動作しますが、かなり重くなります。公開前にWOFF2に変換してください。

font-display: swapは何のためにありますか？

システムフォントでテキストをすぐに表示し、ダウンロードが終わったらあなたのフォントに切り替えます。これがないと、ブラウザが数秒間テキストを隠すことがあり、PageSpeedで問題として指摘されます。

すべてのフォントにpreloadを使うべきですか？

いいえ。最初の画面ですぐに使うもの、通常は1つか2つ（本文と見出し）だけです。preloadが多すぎると、メイン画像と接続を奪い合い、読み込みが悪化することがあります。フォントのpreloadには、同じドメインでもcrossorigin属性が必要です。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール