amp-font で FOUT や FOIT を制御

FOUTやFOITを制御できるamp-fontの使い方

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

Google Fonts などの Web フォントを使うと、FOUT や FOIT が発生します。

FOUT
Web フォントの読み込みが完了するまで代替フォントで表示され、読み込みが完了すると Web フォントに切り替わる現象。
FOIT
Web フォントの読み込みが完了するまで、テキストが表示されない現象。

この FOUT や FOIT を簡単に制御できるように、AMP では amp-font コンポーネントが提供されています。

amp-font
フォントの読み込みを監視し、状況に応じて class の追加・削除を行う AMP 拡張コンポーネント。

この amp-font を使い、FOUT や FOIT を制御する方法を解説します。

尚、AMP で Google Fonts を読み込む方法は、下記のページをご参考ください。

スクリプトの読み込み

amp-font を使うためには、スクリプトの読み込みが必要です。

下記の <script> タグを <head></head> タグ内に追加します。

<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>

そして、<amp-font> タグと CSS を使い、FOUT や FOIT を制御します。

以下の 3 つが、主な制御方法です。

  • FOUT も FOIT も発生させない
  • FOIT を発生させ FOUT を制御
  • FOIT を発生させず FOUT を制御

FOUT も FOIT も発生させない

FOUT も FOIT も発生させたくない場合には、下記のような <amp-font> タグを <body> タグ内に追加します。

Google Fonts の Sawarabi Mincho を読み込んでいるケースとお考えください。

<amp-font layout="nodisplay"
          font-family="Sawarabi Mincho"
          timeout="0"
          on-error-add-class="font-error">
</amp-font>

まず、font-family で読み込みを監視するフォントを指定します。CSS の font-family と同じ書き方での指定です。

次に、timeout="0" を指定します。0 を指定することで、フォントのキャッシュがブラウザにある場合にのみフォントが利用可能になります。

timeout
amp-font のオプション。フォントが利用可能になるまで待機する時間を指定する。指定時間を過ぎてもフォントが読み込まれない場合は、エラー判定となる。デフォルトの指定時間は 3000( 3 秒)。

最後に、on-error-add-class="font-error" を指定します。フォントのキャッシュがブラウザにない時は、<html> タグの class に font-error が追加されます。

on-error-add-class
amp-font のオプション。timeout でエラーと判定された時に、指定した class を <html> タグに追加する。

そして、CSS を指定します。

/* CSS の一例 */

/* フォントがキャッシュされている時 */
body {
  font-family: 'Sawarabi Mincho', sans-serif;
}

/* フォントがキャッシュされていない時 */
.font-error body {
  font-family: 'Yu Gothic', '游ゴシック', YuGothic, '游ゴシック体', sans-serif;
}

読み込む Google Fonts のキャッシュがブラウザにあれば、Google Fonts で表示します。

キャッシュがなければ、class の font-error を使いローカルフォントで表示するように指定します。読み込む Google Fonts と書体が似ているフォントの指定が理想です。

可能であればとの条件付きで、この方法の採用を Google は推奨しています。

参考Optimize custom fonts

この方法のメリットとデメリットは、下記のとおりです。

メリット
FOUT も FOIT も発生しない
デメリット
フォントのキャッシュがブラウザになければ、Google Fonts で表示されない

FOIT を発生させ FOUT を制御

FOUT は発生させたくない、けれど Google Fonts は常に表示したい場合には、FOIT を発生させ FOUT を制御します。

下記のような <amp-font> タグを <body> タグ内に追加します。

Open Sans を読み込んでいるケースとお考えください。

<amp-font layout="nodisplay"
          font-family="Open Sans"
          timeout="3000"
          on-load-add-class="font-success"
          on-error-add-class="font-error">
</amp-font>

この例では timeout は 3000 を指定しており、フォントの読み込みに最長 3 秒まで待機します。

その上で、on-load-add-class="font-success" を指定しています。フォントが 3 秒以内に読み込まれた場合に、<html> タグの class に font-success が追加されます。

on-load-add-class
amp-font のオプション。timeout の時間内にフォントの利用が可能となった時に、指定した class を <html> タグに追加する。

また、何かしらの理由で Google Fonts の読み込みに失敗した時に備えて、on-error-add-class="font-error" も指定します。

そして、CSS を指定します。

/* CSS の一例 */

/* Google Fonts の読み込み中は非表示にする */
h1 {
  visibility: hidden;
}

/* Google Fonts が読み込まれた場合は Google Fonts で表示 */
.font-success h1 {
  font-family: 'Open Sans', sans-serif;
  visibility: visible;
}

/* Google Fonts の読み込みに失敗した場合はローカルフォントで表示 */
.font-error h1 {
  font-family: Arial, sans-serif;
  visibility: visible;
}

amp-font が Google Fonts の読み込みを判定するまでは、テキストを非表示にしておきます。

そして、3 秒以内に Google Fonts が読み込まれると、Google Fonts でテキストを表示します。

3 秒を超えても Google Fonts が読み込まれない場合には、ローカルフォントで表示します。

これにより FOUT が発生せず、よほど読み込みに時間がかからない限り Google Fonts を常に表示できます。

この方法のメリットとデメリットは、下記のとおりです。

メリット
FOUT が発生しない
Google Fonts の読み込みによほど時間がかからない限り、常に Google Fonts を表示できる
デメリット
テキストがすぐに表示されない FOIT が発生する

FOIT を発生させず FOUT を制御

FOIT は発生させたくない、けれど Google Fonts は常に表示したい場合には、代替フォントで FOUT を抑えるようにします。

下記のような <amp-font> タグを <body> タグ内に追加します。

Google Fonts の Sorts Mill Goudy を読み込んでいるケースとお考えください。

<amp-font layout="nodisplay"
          font-family="Sorts Mill Goudy"
          timeout="3000"
          on-load-add-class="font-success">
</amp-font>

Sorts Mill Goudy が 3 秒以内に読み込まれると、<html> タグの class に font-success が追加されます。

そして、CSS を指定します。

/* CSS の一例 */

/* Sorts Mill Goudy と書体が似ている Garamond を指定 */
h1 {
  font-family: Garamond, serif;
  letter-spacing: 2px;
}

/* Sorts Mill Goudy が利用可能となればフォントを変更 */
.font-success h1 {
  font-family: 'Sorts Mill Goudy', serif;
  letter-spacing: normal;
}

Sorts Mill Goudy が読み込まれるまでは、書体が似ている Garamond で表示します。

また、letter-spacing を調整し、Sorts Mill Goudy になるべく似せます。

Sorts Mill Goudy が読み込まれると、フォントを変更します。

これにより FOUT による文字のちらつきを極力抑えられる上に、FOIT は発生しません。

この指定をしたのが、下の GIF です。スーパーリロード(ブラウザのキャッシュを消し再読み込み)を繰り返しています。

font-size も調整すれば、より FOUT を抑えられます。

この方法のメリットとデメリットは、下記のとおりです。

メリット
FOUT を抑えられる
FOIT は発生しない
Google Fonts の読み込みによほど時間がかからない限り、常に Google Fonts を表示できる
デメリット
FOUT を完全に発生させないのは難しい
書体が似ていてローカルにあるであろう代替フォントを探す必要がある
書体が似ている代替フォントがなければ利用できない(結局ひどい FOUT が発生してしまうため)

通常ページであれば、Font Loading API や Web Font Loader を使い FOUT や FOIT を制御できます。

しかし、執筆時点の AMP では、まだ JavaScript は使えません。

また、CSS の font-display でも制御できますが、ブラウザの対応状況に不安が残ります。

font-display のブラウザ対応状況 – Can I use…

AMP での FOUT や FOIT に悩まれている場合には、amp-font を使ってはいかがでしょうか。