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

font-display settings を使用して、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 Fonts がスワップ期間の終わりまでに読み込まれていない場合、フォールバックフォントが使用されたままになります。

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 settings

  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 サイト自体を変更する必要はありません。

アドビのロゴ

アカウントにログイン