マニュアル キャンセル

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

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 設定をカスタマイズするには、次の手順に従います。

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

    プロジェクトを編集
    プロジェクトを編集

  2. サイドバーから次の font-display 値のいずれかを選択します。 デフォルトでは、web フォントプロジェクトの font-display 設定は auto に設定されています。

    font display 設定

  3. 変更を保存」をクリックすると、font-display の値が数分以内に web サイトに適用されます。

新しい font-display 設定は、既存の埋め込みコードの一部として web サイトに自動的に含まれます。

既存の web プロジェクトの更新

2020 年 9 月に、アドビの web フォントの読み込みに font-display のサポートが追加されました。2020 年 9 月より前に作成された web プロジェクトは、デフォルトの font-display である auto ビヘイビアーを使用するように更新されました。

既存のプロジェクトの font-display 設定は、上記の手順に従って変更できます。変更を保存すると、新しい font-display 設定が既存の埋め込みコードの一部として web サイトに含まれます。Web サイト自体を変更する必要はありません。

ヘルプをすばやく簡単に入手

新規ユーザーの場合