Googleフォントの使い方: Webフォントの表示の仕組みと最適化

Post on:2016年11月21日

Googleフォントのロードに何を注意すべきか

私はロンドンで開催された「Polymer Summit 2017」のGoogle Chrome Developersの提唱する「Do Less & Be Lazy」のアプローチに、非常に共感されました。簡単に説明すると、何かがクリティカルパスではない場合はそれを最初にページに適用させる必要はないということです。
参考: Do Less & Be Lazy -YouTube

フォントについて考えてみてください。重要なパスはテキストを見せることですか？それともテキストをスタイルすることですか？大切なのはコンテンツを伝えることです。例えコンテンツの見た目が悪くても、コンテンツが無しの状態になるよりも優れているということです（見た目に意味があるコンテンツもあるかもしれませんが）。

テキストのレンダリングがクリティカルパスではないと思うなら、わたし達はチャットで話し合う必要がありますね。

GoogleフォントなどのWebフォントがロードされる時のフローには、2パターンあります。

FOIC(flash of invisible content)
見るべきでないコンテンツがちらっと見える（見え方のサンプル）。
ブラウザはあなたがWebフォントを使用しようとしている時に、まず透明インクですべてのテキストを描画し、しばらく時間がかかり、最終的にフォントを取得した際にテキストを正しく描画して再レイアウトします。

実際のコンテンツを見るのではなく、あなたがスタイルし忘れた箇条書きや下線やランダムなテキストを見ることになるので、私はこれが嫌いです。

FOUC(flash of unstyled content)
スタイルされていないコンテンツがちらっと見える（見え方のサンプル）。
Chromeは3秒後にWebフォントの待機を停止します（最近、2Gだと0秒後）。これが意味することは、透明インクで表示するのではなく、代替フォントでテキストを描画するということです。あなたのWebフォントが最終的にダウンロードされると、新しいフォントですでに表示されているテキストが再び描画されます。

メモ

iPhoneではこのタイムアウトは存在しないので、基本的にはFOICのみです。その中間の救済措置はなく、「テキストなし」から「すべてのテキスト」に移行するまで待つことになります。

GPRSと2GのそれぞれChromeでおこなったデモのコードがここにあります。
デモページ

このデモは、LTEで非常に素晴らしく見えるでしょう。すべてがLTE上で超高速です。

Webフォントの実装に役立つリソース

多くの人がWebフォントについて書いています。私はそれらの記事を書き直そうとはしません。Chromeは特に「font-display」の仕様に取り組み、2GでWebフォントのダウンロードタイムアウトを0秒に減らすことによって、改善するために多くの作業を行っています。

Webフォントの実装に役立つリソースをいくつか紹介します。

「Webフォントの最適化（日本語版）」にある「Webフォントとクリティカルレンダリングパスで、ブラウザがWebフォントをどのように処理するか。
「font display」で、
どのようにフォントが読み込まれか、どのように影響するか。
「CSS font-display」で、フォントが表示されるブラウザごとの仕組み。
「Minimising font downloads」で、ロードする文字の範囲を制限することで、フォントのダウンロードを最小に。
「type is your right」で、なぜWebフォントを気にするべきか、JavaScriptとFont Face Observerというライブラリを使ってFOITを最小限にする方法。
「Font loading strategy」で、Font Face Observerを組み合わせたボルトロンソリューション、非同期にフォントバンドルとWebストレージをロードする方法。

Googleフォントの遅延読み込み

個人的には「font-display: optional」を使用しますが、まだどの環境でも動作しません。それが対応するまでの間は、Webフォントを遅延読み込みさせる2つの簡単な方法があります。繰り返しになりますが、私はFOUCを気にしません。なぜなら、私にとってプログレッシブエンハンスメントのように感じるからです。できるだけ早くコンテンツを表示して、スタイルを適用します。

<head>
  <style>
    body {
      font-family: 'Arima Madurai', sans-serif;
    }
  </style>
</head>
<body>...</body>
<script>
  // Do this only after we've displayed the initial text.
  document.body.onload = function() {
    var url = 'https://fonts.googleapis.com/css?family=Arima+Madurai:300,400,500';
    loadFont(url);  // hold tight, i tell you below.
  }
</script>

<head>

<style>

body {

font-family: 'Arima Madurai', sans-serif;

}

</style>

</head>

// Do this only after we've displayed the initial text.

document.body.onload = function() {

var url = 'https://fonts.googleapis.com/css?family=Arima+Madurai:300,400,500';

loadFont(url); // hold tight, i tell you below.

}

</script>

この「loadFont」を実行する2つの方法を紹介します。

Load the stylesheet (blocking)

これは最も簡単な方法で、シンプルなページで素晴らしく機能します。しかし、スタイルシートをロード/パースすることはパース/描画するのをブロックするため、ドキュメントが読み込まれた後に他のモジュールを読み込んだ場合、遅くなるのでうまくいきません。
デモページ

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);

var link = document.createElement('link');

link.rel = 'stylesheet';

link.href = url;

document.head.appendChild(link);

XHR the stylesheet (asynchronous)

同期性を気にするなら、非同期のXMLHttpRequestを実行し、その結果で「style」のノードを作成することができます。
デモページ

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var style = document.createElement('style');
    style.innerHTML = xhr.responseText;
    document.head.appendChild(style);
  }
};
xhr.send();

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

var style = document.createElement('style');

style.innerHTML = xhr.responseText;

document.head.appendChild(style);

}

};

xhr.send();

これをさらに進めて、インラインの<style>を作成するのではなく、ブラウザのキャッシュが既に準備されているので、前の方法のように<link>を追加することができます。もしあなたがブラウザのキャッシュを信用するなら。私は信用しません。

アップデート:
これは明らかに完璧ではありません。最初のデモのように何もしなかったとしても、高速のLTE接続でFOUCを与えるでしょう。ポイントはビジターすべてがLTE接続をしているわけではありません、サイトで機能しているときにそれらについてあなたが考えることを私は望みます。FOUCを最小限に抑えたい場合、Helen HolmesはWebのタイポグラフィーとパフォーマンスについて驚くべき話を最近しました（YouTube）。FOUCがより穏やかになるように、フォールバックのフォントのx-heightをターゲットフォントに合わせる方法を説明しています。