マニュアルキャンセル

font-display 設定を使用した web フォントのパフォーマンスのカスタマイズ

検索

最終更新日 : 2023年6月23日

font-display 設定を使用して、web フォントのパフォーマンスを変更する方法を説明します。

font-display 設定を使用すると、web フォントを web ブラウザーに読み込んで web サイトに適用する方法を指定できます。font-display には、次の 5 つのオプションがあります。

Font-display の値	ビヘイビアー
Auto	ブラウザーで、デフォルトの方法を使用してフォントを読み込むことができます。
Block	Web フォントがダウンロードされるまで、web サイトのテキストを非表示にします。Web サイトにアクセスしたユーザーには、このオプションで、非表示テキストを示す Flash、つまり FOIT が表示される場合があります。
Swap	Web フォントがダウンロードされるまで、CSS で設定したフォールバックフォントを表示します。Web サイトにアクセスしたユーザーには、このオプションで、スタイルなしのテキストを示す Flash、つまり FOUT が表示される場合があります。
Fallback	block ビヘイビアーを短時間使用し、swap ビヘイビアーに切り替えて、フォールバックフォントをテキストに適用します。Web フォントがスワップ期間の終わりまでに読み込まれていない場合、フォールバックフォントが使用されたままになります。
Optional	block ビヘイビアーを短時間使用した後、フォールバックフォントをテキストに適用します。この値を指定すると、web サイトにアクセスしたユーザーが低速のインターネット接続を使用している場合に、web ブラウザーで web フォントをまったくダウンロードしないように設定することができます。

font-display とサポートされている値の技術的な詳細については、CSS Fonts Module Level 4 の仕様を参照してください。

注意：

デフォルトでは、web フォントプロジェクトは、font-display が auto に設定された状態で作成されます。

font-display 設定をカスタマイズするには、次の手順に従います。

web プロジェクトページで「プロジェクトを編集」をクリックします。

プロジェクトを編集
サイドバーから次の font-display 値のいずれかを選択します。デフォルトでは、web フォントプロジェクトの font-display 設定は auto に設定されています。
「変更を保存」をクリックすると、font-display の値が数分以内に web サイトに適用されます。