GoogleFonts(Google提供のwebフォント)を遅延適用する

webフォントの使用は様々なメリットがあります。
しかし、webフォントのデータダウンロードが終わるまでページ内容を表示できないというデメリットもあります。
この問題を解消するためのwebフォントの遅延適用の方法について解説していきます。

GoogleFontsの適用方法については以下を参照してください。

webフォントの遅延適用とは

webフォントはデータを全てダウンローとしてからでないと文字を表示できません。
また、webフォントは、その性質上データ容量が大きいです。
そのため、弱い回線やネットワークが混雑していると、なかなかページの内容が表示できない可能性があります。
これは、ユーザーの離脱につながります。

これを回避するためにwebフォントの遅延適用を行うという方法があります。
遅延適用とは、まず標準フォントで内容を表示させておき、webフォントのダウンロードが終わったらフォントを適用する、というものです。
こうすることで、すぐに内容を表示させることができるのです。

webフォントの遅延適用の方法

本記事の内容は以下のGoogle公式の方法の解説になります。

最初は標準フォントを適用

webフォントを適用したい要素に最初は標準のフォントを適用させます。
すでにwebフォントを適用してしまっている場合は、その適用を外します。

jsにてフォント読み込み完了を検知

次に、webフォントの読み込み完了を検知できる仕組みを作ります。
ここでの手順は以下の２つになります。
・fontfaceobserver.jsの入手
・webフォントダウンロード後の処理を自前で作成

fontfaceobserver.jsの入手

webフォント読み込み検知用のfontfaceobserver.jsがgoogleから提供されているので、それを使用します。
以下のサイトからダウンロードできます。

webフォントダウンロード後の処理を自前で作成

次にwebフォントダウンロード後の処理を実装していきます。

jsにて以下のような処理を記載します。
webフォントのダウンロードが完了したら、htmlタグにfonts-loadedクラスを付与しています。

webフォント遅延適用js

// ダウンロード完了を検知したいWebフォント
const sawarabiObserver = new FontFaceObserver('Sawarabi Gothic');
const cinzelObserver = new FontFaceObserver('Cinzel');

Promise.all([
    sawarabiObserver.load(),
    cinzelObserver.load()
]).then(function(){
    // 対象のフォントが読み込まれたらCSSクラスを付与
    document.documentElement.classList.add("fonts-loaded");
});

次にフォントロード後のスタイルを定義します。
htmlタグにfonts-loadedクラスが付与されたらwebフォントが適用されるようにします。

フォントロード後のスタイル

/* body全体に適用 */
html.fonts-loaded body {
	font-family: 'Sawarabi Gothic', sans-serif;
}

/* 特定要素に適用 */
html.fonts-loaded .SampleElem {
	font-family: 'Cinzel', serif;
}

公式ドキュメントは以下を参照ください。