Web Font LoaderはJavaScriptのライブラリです。すなわち、「Google Fontsを読み込んで利用する」のように普通にscriptタグでwebfontloader.jsを読み込むと、レンダリングブロックを起こします。より最適にウェブフォントを読み込むために、Web Font Loaderは非同期で読み込む事も出来ます。

グローバル変数WebFontConfigを設定

Web Font Loaderはスクリプトロード時にグローバル変数WebFontConfigが定義されているかチェックし、定義されていればウェブフォントを読み込むためのloadメソッドへWebFontConfigが渡されます。すなわち、WebFontConfigは「Google Fontsを読み込んで利用する」で紹介した設定オブジェクトです。この方法を利用すると明示的にWebFont.load()を呼び出さずに済むので、Web Font Loaderを非同期に読み込むことが出来ます。

非同期でWeb Font Loaderを読み込むにあたって二つのパターンを紹介しておきます。

スクリプト注入方式

Web Font Loaderのドキュメントで例示されているのがこの読み込み方法で(少し改変しています)、インラインスクリプトによって<script>をdocumentに注入しています。

<script>
window.WebFontConfig = {
	google: {
		families: ["Open+Sans"]
	}
};

(function(d) {
	var wf = d.createElement('script'), s = d.scripts[0];
	wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
	s.parentNode.insertBefore(wf, s);
})(document);
</script>

この方法はWeb Font Loaderが読み込まれる前にWebFontConfigが定義されるので、依存を気にしなくて良い点が優れています。しかしながら、インラインスクリプト注入はCSSOMを待つ必要があり、プリロードスキャナーの恩恵も受けません。ですから、次の、モダンで効率のよいasync属性でロードする方法も検討してみてください。

async属性ロード

このパターンはHTML5のasync属性を用いたものです。

<script>
window.WebFontConfig = {
	google: {
		families: ["Open+Sans"]
	}
};

if(typeof WebFont === 'object'){
	WebFont.load(WebFontConfig);
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" async></script>

インラインでWebFontConfigを定義しているのはスクリプト注入方式と同じですが、プリロードスキャナーで発見出来るように<script>でロードします。async属性をつけているので、IE10以上と全てのモダンブラウザで非同期に実行されます。

こちらのパターンはasync属性付なので、Web Font Loaderロード時にWebFontConfigが定義されているかどうかはわかりません。故に、WebFontConfigを定義したあと、Web Font Loaderがロード済みかどうかをチェックするため、typeofでグローバル変数WebFontを調べています。ロード済みであった場合には、loadメソッドで明示的にウェブフォントのロードを開始しています。