Google Fonts を非同期で読み込みサイトスピードを高速化

Web Font Loader とは？

Web Font Loader は、Google と Typekit が共同開発したフォントの読み込みを制御できる JavaScript ライブラリです。

ソースコードは GitHub で公開されており、無料で利用できます。

また、Binar::Apps が紹介している 「FOUT with Web Font Loader」 が、おすすめの使い方。

この記事では sessionStorage を使い、Web Font Loader を利用しています。

そのため、サイト訪問者がブラウザを閉じるまで、ページを移動しても Web フォントを再読み込みする無駄が生じません。

Web Font Loader の使い方

Web Font Loader の使い方は、非常に簡単です。

Google Fonts で公開されているフォントは、フォント名を指定するだけで非同期で読み込めます。

Roboto の regular 400 を読み込ませる場合には、下記のコードを用います。JavaScript を書くファイルに追加するか、<script></script> で囲みインラインで記述します。

window.WebFontConfig = {
  google: { families: ['Roboto'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};

(function() {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

2 行目の google: { families: ['Roboto'] } の 'Roboto' で使用するフォントを指定します。

正式版となった日本語フォントも指定できます（下記のコードで指定しているのは、Noto Sans JP）。

window.WebFontConfig = {
  google: { families: ['Noto+Sans+JP'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};
以下同じ

複数のフォントウェイトの指定も可能。

window.WebFontConfig = {
  google: { families: ['Roboto:400,500,700'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};
以下同じ

カンマ , で区切れば、2 つ以上の Google Fonts も指定できます。

window.WebFontConfig = {
  google: { families: ['Roboto:400,500,700', 'Noto+Sans+JP'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};
以下同じ

指定するフォント名は、HTML で呼び出す際のコードを参考にします。

例えば、普通に Noto Sans JP を読み込ませる場合には、下記の HTML を使います。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">

https://fonts.googleapis.com/css?family= の後の Noto+Sans+JP が使用するフォント名です。

そのままコピペをすれば OK 。簡単です。

ちなみに、Material icons も、Web Font Loader を使い非同期で読み込めます。

window.WebFontConfig = {
  google: { families: ['Material+Icons'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};
以下同じ

window.WebFontConfig = {
  custom: { families: ['Nico Moji'],
            urls: ['https://fonts.googleapis.com/earlyaccess/nicomoji.css'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};

(function() {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

HTMLの nicomoji は使わない
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />

window.WebFontConfig = {
  google: { families: ['Roboto:400,500,700', 'Noto+Sans+JP'] },
  custom: { families: ['Nico Moji'],
            urls: ['https://fonts.googleapis.com/earlyaccess/nicomoji.css'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};

(function() {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

CSS で font-family を指定

あとは、CSS の font-family を指定すると、Google Fonts を表示できます。

body {
  font-family: 'Roboto', sans-serif;
}

Noto Sans JP を使う場合には、この指定方法がおすすめです。

body {
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
}

Noto Sans JP より Noto Sans CJK JP を優先して表示する指定です。

おすすめの理由は、Android と Chrome OS のシステムフォントに Noto Sans CJK JP が採用されているため。

ローカルにあるフォントファイルを使うことで、フォントが素早く表示されます。

しかも、Noto Sans JP と Noto Sans CJK JP は、書体がほぼ一緒です。

書体の違いに気付く方は、そういらっしゃらないと思います。

FOUT（ちらつき）を CSS で制御

Google Fonts に限らず、Web フォントを非同期で読み込む際には、FOUT と呼ばれるちらつきが生じます。

FOUT とは下の動画のように、フォントが途中で変わる現象です。

この FOUT が起きる原因は、Web フォントの読み込みが完了するまで、スタイルが適用されていないテキストが表示されるためです（動画では、動画撮影に使った Chromebook のローカルフォント Noto Sans CJK JP が最初に表示されている）。

そして、読み込みが完了すると Web フォントに変わります（動画では、読み込んだ Sawarabi Mincho に変わっている）。

さらに日本語の Web フォントは、フォントの切り替わりに少しタイムラグが生じます（切り替わり時に一瞬テキストが消える）。

Web Font Loader は、この FOUT の対策も可能です。

Web Font Loader は、フォントイベントに対応したクラス名を <html> タグに追加します。

追加されるクラス名のうち、CSS で主に利用するのは下記のものです。

• .wf-loading：フォントを読み込み中の時
• .wf-active：フォントの読み込みが完了した時
• .wf-inactive：フォントの読み込みに失敗、またはブラウザが Web フォントに対応していない時

他にフォント毎に追加される 3 つのクラス名もありますが、CSS ではあまり使わないため省略しています。詳しくは GitHub 内の Events をご覧ください。

この <html> タグに追加されるクラス名を使い、CSS を指定します。

h2 {
  font-family: 'Sawarabi Mincho';
  visibility: hidden;
}

.wf-active h2 {
  visibility: visible;
}

上記の CSS は h2 の見出しに Sawarabi Mincho を指定し、まずは非表示にしています。ただし、display: none; での非表示ではないため、レイアウトは崩れません。

フォントの読み込みが完了し .wf-active のクラス名が <html> タグに追加されると、visibility: visible; で h2 を表示しています。

この CSS を指定すると、下の動画のように表示されます。

Web フォントの読み込みが完了するまでテキストは表示されないため、フォントが切り替わりません。

この CSS での FOUT の制御は、Adobe のフォントイベントが紹介している方法です。

ただし、この方法は、意図的に FOIT を発生させるものです。

FOIT

最初はテキストが表示されず、Web フォントの読み込み後に突然テキストが表示される現象

FOUT より FOIT を嫌う方は多いため、どうしてもローカルフォントでの表示を避けたい箇所でのみの使用がいいかもしれません。

例えば、サイトタイトルに独特の Web フォントを使っている場合は、そのフォントがブランディングに一役買っているはずです（Instagram が代表格）。そのような場合は、ローカルフォントでの表示は避けるべきかもしれません。

また、ボトムナビのような重要なボタンに、Material icons を使っている場合も同様です（アイコン以外の表示は、明らかに好ましくない）。

h2 {
  font-family: Georgia, serif;
  font-size: 25px;
  letter-spacing: 1px;
  position: relative;
  top: 2px;
}

.wf-active h2 {
  font-family: Vollkorn, serif;
  font-size: 24px;
  letter-spacing: 0;
}