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

2018/11/5 カスタマイズ

デバイスを問わず、表示させたいフォントを表示できるのが Google Fonts です。

また、豊富な種類を無料で利用できるのも嬉しいポイント。

さらに、2018 年 9 月 28 日より、それまでアーリーアクセス版だった日本語フォントが正式版として提供されました。

しかし、サイト表示が遅くなるデメリットがあります。遅くなる原因の 1 つが、レンダリングをブロックしてしまうこと。

そこで Web Font Loader を使い、非同期で読み込む方法をご紹介します。

Web Font Loader を使えば、レンダリングをブロックせずに Google Fonts を利用できます。

よりサイトを高速化したい場合には、Web Font Loader ではなく rel="preload" で先読みする方法がおすすめです。使い方は、下記のページで解説しています。

AMP にも対応！Google Fonts を preload で先読みし最適化

Web Font Loader とは？
Web Font Loader の使い方
1. アーリーアクセス版の読み込み方法
2. 正式版とアーリーアクセス版を同時に読み込ませる方法
CSS で font-family を指定
FOUT（ちらつき）を CSS で制御
1. もっと細かく FOUT を制御

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" 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;
  }
};
以下同じ

アーリーアクセス版の読み込み方法

2016 年 10 月から 9 種類のフォントが公開されているのが、アーリーアクセス版の Google Fonts 日本語。

このうち、「はんなり明朝」「こころ明朝」「ニコモジ」「ニクキュウ」の 4 つのフォントは、正式版では提供されていません。

この 4 つのアーリーアクセス版のフォントを使う場合でも、Web Font Loader を利用できます。

ただし、正式版とアーリーアクセス版は URL が異なるため、ほんの少し手間が増えます。

ニコモジを読み込む場合のコードは、下記のとおりです。

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);
})();

正式版の Google Fonts は、 google: { families: [ ] } でフォント名を指定します。

一方、アーリーアクセス版のフォントは、 custom: { families: [ ] } でフォント名を指定します。

フォント名は、 CSS の font-family の Nico Moji を使います。

HTML で呼び出すコード内の nicomoji で指定すると、読み込み速度が大幅に低下します。これは、その他のアーリーアクセス版フォントでも同様です。

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

さらに、3 行目の urls: [ ] で URL の指定が必要です。

正式版とアーリーアクセス版を同時に読み込ませる方法

正式版とアーリーアクセス版の Google Fonts は、同時に読み込ませることもできます。

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);
})();

google: { families: [ ] } も custom: { families: [ ] } も指定します。

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 のフォントイベントが推奨している方法です。

<body> タグに Google Fonts を指定する場合には、ファーストビュー内のテキストに CSS で FOUT 対策を行うといいかもしれません。

もっと細かく FOUT を制御

Adobe は、より細かく CSS を指定することも推奨しています。

例えば、こんな感じです。

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;
}

.wf-active h2 に、最終的に表示する Google Fonts の Vollkorn を指定しています。

それに加え h2 に、 Vollkorn が読み込まれるまで Georgia を表示するよう指定しています。さらにフォントサイズや字間、位置も調整。

この指定をすると、下記の動画のように FOUT を抑えることが可能です。

FOUT は発生しています。しかし、お互い似た書体であるため、ちらつきをだいぶ抑えられています。 letter-spacing をもっと突き詰めれば、さらにちらつきは抑えられるはず。

似たフォントを探す手間がかかりますが、テキストは瞬時に表示したいとお考えの方に適しています。

Google Fonts は、サイトにアクセントを加えてくれます。また、テキストが読みやすいサイトになるのも大きな魅力です。

しかし、サイト表示の速度を犠牲にしては、サイト訪問者を失望させます。

美しさも速さも両立させるために、Web Font Loader を利用されてはいかがでしょうか。

<link rel="preload"> でフォントファイルを読み込んでも、サイト表示は高速化します。ただ、IE が未対応。

Web Font Loader であれば、IE にも対応できます。

また、FOUT を制御できるのも魅力です。

ちなみに、@import を使い CSS で Web フォントを読み込むのは、絶対におすすめできません。ものすごくサイト表示が遅くなります。

フォローする

Facebook ページにいいね！をする

FirstLayout をフォローする

フォローする

人気記事

全ブラウザ対応！preload で CSS を非同期で読み込み高速化

2018/3/2 カスタマイズ

画像を徐々に表示する CSS アニメーション

2018/5/18 カスタマイズ

WordPress を PWA に！ホーム画面への追加機能を実装

2018/2/24 カスタマイズ

むーらん

2018年8月2日 19:17
お世話になります。
大変分かりやすい記事で参考にさせていただいております。
「Google Fonts 日本語を読み込ませる方法」を試してみたのですが、
urls: で指定した CSS読み込み先の外部リンク部分が、レンダリングをブロックしてしまうようです。
尚、利用フォントは ‘Sawarabi Mincho’ですので、ご提示コードの一部を以下のように置換えて子テーマのheader.phpに入力しています。
```
 custom: {families: ['Sawarabi Mincho'],
 urls: ['https://fonts.googleapis.com/earlyaccess/sawarabimincho.css'] },
```
私の環境では、テーマをSimplicity2、キャッシュ系プラグインにAutoptimize、そしてCDNを利用していますが、確認及び補足対応が必要と考えられる事はありますでしょうか？　キャッシュは削除しています。
大変お手数ながら、ご指南頂けましたら幸いです。どうぞ宜しくお願い致します。
返信
- Akira
  
  2018年8月2日 21:26
  
  テスト環境の Simplicity2 に Autoptimize をインストールして試してみました。
  コードは、むーらんさんがお書きになったものと全く同じです。
  結果は、 WebPageTest でも PageSpeed Insights でも、レンダリングブロックを確認できませんでした。
  下のリンクは WebPageTest の計測結果の画像です。
  WebPageTest の計測結果
  背景が緑色部分がレンダリングをブロックしているリソース、紫色部分が非同期で読み込まれているリソースです。さわらび明朝は、非同期で読み込まれています。
  Autoptimize を無効にしても非同期で読み込まれていたので、怪しいのは CDN のような気がします。
  CDN を無効にされると、レンダリングブロックは解消しないでしょうか。
  また、 Simplicity であれば、コードは header.php ではなく、子テーマの javascript.js にお書きになってもいいかもしれません。今回私は javascript.js にコードを追加しました。
むーらん

2018年8月2日 22:13

Akira様
お世話になっております。
コメント頂きました通りで子テーマの javascript.js に書き直し、CDN を再度キャッシュパージしましたら、上手くいきました。
お忙しい中、ご丁寧なアドバイス並びにお手間を賜り、誠に有難うございました。

返信
- Akira
  
  2018年8月2日 23:00
  
  上手くいったようで良かったです。
  ご不明な点がございましたら、ご遠慮なくお尋ねください。
TO

2018年11月5日 17:00

Akira様
高速化されたGoogleWebFontsの導入法のわかりやすい解説ありがとうございます。
無事、自ブログの方が高速化され、悩まされていたページ表示速度の問題が解決しました。
ところで、ひとつ質問をよろしいでしょうか？
私のブログではGoogleWebFontがページによって、反映されるているページ、反映されていないページが何故かあります。
考えられる原因についておわかりになりますか？
特に、一問一答形式のWeb診断表のページに至ってはレイアウトまでも崩れています。
（他のページはFontが反映されていないだけです。）
Twentyseventeenの子テーマを使用しています。
以下、header.phpとstyle.css、javascript.jsです。
——————————————————————————————————————————
①//header.php//
/* noto-sans-jp-regular-japanese */
@font-face {
font-family: ‘Noto Sans JP’;
font-style: normal;
font-weight: 400;
src: local(‘Noto Sans Japanese Regular’), local(‘NotoSansJapanese-Regular’),
url(‘https://example.com/theme/twentyseventeen-child/fonts/noto-sans-jp-v18-japanese-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */}
（※必要と思われる部分のみ記述しています。）
——————————————————————————————————————————
②//style.css//
/* ブログ内のフォント */
body {
font-family: ‘Noto Sans JP’, sans-serif;
}
（※必要と思われる部分のみ記述しています。）
——————————————————————————————————————————
③//javascript//
window.WebFontConfig = {
google: { families: [‘Noto+Sans+JP’] },
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);
})();
（※必要と思われる部分のみ記述しています。）
——————————————————————————————————————————
よろしければ、ご指南いただけると幸いです。
ご迷惑おかけします。

返信
- Akira
  
  2018年11月5日 18:04
  
  コメント欄では WordPress が削除したので確認できませんが、通知が来た Gmail では「 preload を指定する」とお書きになったのが見えます。
  また、Web Font Loader では不要な @font-face でフォントを読み込まれています。
  もし、preload で先読みしていらっしゃるのなら、preload と Web Font Loader はどちらか 1 つだけをご選択ください。
  記事冒頭の注意書きが、誤解を生んだように思えます。申し訳ありません。注意書きを修正しました。
  サイトスピードは preload の方が速くなるので、preload でよろしければ Web Font Loader を削除します。
  IE などでも非同期で読み込まれたい場合には、Web Font Loader を残し preload や @font-face を削除します。
  > 一問一答形式のWeb診断表のページに至ってはレイアウトまでも崩れています。
  これはサイトを拝見しないと、原因が分かりません（拝見しても分からないかもしれません）。
  フォントの読み込みでレイアウトが崩れることは、普通は起こりません。
  HTML の閉じタグがない、CSS の閉じカッコやセミコロンがない、PHP エラーが出ているなどが原因かもしれません。
TO

2018年11月6日 8:59

Akira様
お忙しい中、回答ありがとうございました。
もし、preload で先読みしていらっしゃるのなら、preload と Web Font Loader はどちらか 1 つだけをご選択ください。
記事冒頭の注意書きが、誤解を生んだように思えます。申し訳ありません。注意書きを修正しました。
>preloadとWeb font Loaderは併用するものかと勘違いしていました。
プログラミングの知識は、せいぜいネットで拾った情報で
自分のサイトに活用していく程度しかないので、初歩的な質問をしてすみませんでした。
フォントの読み込みでレイアウトが崩れることは、普通は起こりません。
HTML の閉じタグがない、CSS の閉じカッコやセミコロンがない、PHP エラーが出ているなどが原因かもしれません。
>そうなのですね。preloadとweb font loaderを併用するというわけのわからないことを
やっているうちにCSS等が崩れたのかもしれません。
もう一度トライしてみます。
お忙しい中、ご回答どうもありがとうございました。

返信
- Akira
  
  2018年11月6日 11:22
  再度、TO さんのコメントを見返すと、header.php に追加されている @font-face に 1 ヶ所誤りがありました。
  @font-face の src がカンマで終わっています。
```
src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'),
     url('https://example.com/theme/twentyseventeen-child/fonts/noto-sans-jp-v18-japanese-regular.woff2') format('woff2'),
```
  おそらく、これがレイアウトが崩れた原因です。
  カンマをセミコロンに変更されると、レイアウト崩れは直らないでしょうか。
```
src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'),
     url('https://example.com/theme/twentyseventeen-child/fonts/noto-sans-jp-v18-japanese-regular.woff2') format('woff2');
```
TO

2018年11月13日 10:36

Akira様
丁寧な返信ありがとうございます。
Googleフォントの件は何度試してみても@import以外の方法ではうまくいかないので、とりあえず保留にしています。（前回、webfontloaderとpreload指定の併用でGoogleフォントが適用された原因は、CSSに@importがあったのか、キャッシュが保存されていたかのどちらかだったようです。一晩したら、Googleフォントが適応されなくなっていたので、おそらく原因は後者だと思われます。）
非同期読み込みの方法は、私のサイトの場合、サーバーに置いたwoff2ファイルが常に文字化けしており、うまくWebFTP（エックスサーバーのもの）が文字エンコード等で対応していないのかと思います。（単に私のブラウザが対応していないだけかもしれませんが・・・）
fontファイル上に.htaccessファイルを置き、クロスドメイン禁止解除コードを書いたり色々とネットで調べられる対策法を講じてましたが、解決しませんでした。
もしかしたら、導入中の何らかのプラグインが邪魔をしているのかもしれません。
とりあえず、今後、時間が空いた時に、この問題の解決を図りたいと思います。
どうもありがとうございました。

返信
- Akira
  
  2018年11月13日 15:50
  基本的なことを 1 つ 1 つ確認されるのがいいと思います。
  例えば、preload で先読みされる場合の @font-face のフォントファイルのパスは正しいでしょうか。
  このようにお書きになっていますが…
```
https://example.com/theme/twentyseventeen-child/fonts/noto-sans-jp-v18-japanese-regular.woff2
```
  こうではありませんか？
```
https://example.com/wp-content/theme/twentyseventeen-child/fonts/noto-sans-jp-v18-japanese-regular.woff2
```