Google Web Fonts を非同期で読み込みをして表示改善する方法

Google Web Fonts は遅い？

フォントを選択する際に、スピードメーターのような表示の部分は赤いところを指し示していたことは事実だけど、体感的にはそれほど遅いと感じていませんでした。

Google Web Fonts の利用自体が遅いための警告かと思っていたのですが、今回指摘されたのは、ファーストビューでの表示が遅い・見えててほしい部分が見えないよということの様子。 Chrome で確認してみたところ、Fontをしていしていところは、なんだか初期読み込み時は表示がでない。どうやらfont-familyでGoogle Web Fontsの指定をしていると、読み込み完了まで表示されないらしい。

改善方法は？

では、表示させるためにはどうしたらいいか？

調べていると、Web Font Loader というJSが提供されているらしい。

Web Font Loader

typekit/webfontloader

参照先を読んでみるとそれほど難しくなく遅延読み込みはできそうということはわかったのですが、もっと何か簡単にできる方法がないかと調べると、どうやら今回の問題は、Google Web Fontsを非同期で読み込ませたら解決するらしい。

Webフォントの非同期読み込み - Weblog - Hail2u.net

方法は２つ掲載されていたのですが、そのうちの動的なlink要素の追加の方法だと、JSで要素を生成してから読み込ませる分、毎回表示にラグが発生するようになってしまった。

一方のrel="stylesheet"の後付けという方法では、一度ページ全体を読み込ませておけば、ページ遷移後はそれほどラグを気にしなくてもいいくらいの表示になりました。

link要素を読み込みを rel="stylesheet" を抜いて、後から追加するだけで改善されるなんて！

利用したソース

このブログでは利用箇所が１カ所のみだったので、シンプルに指定してみました

HTML

<link href="http://fonts.googleapis.com/css?family=Fredericka+the+Great&text=HAMEDIO" id="gwebfont" />

linkの指定で rel="stylesheet" を抜いて idを何か指定しただけです。

JavaScript

(function () {
  var webfonts = document.getElementById('gwebfont');
  webfonts.rel = 'stylesheet';
})();

HTMLで指定したlink要素のidを指定しただけ。

これで表示遅い！のWarningはとりあえず消えてくれました。