Web Font Loaderを使ってGoogle Fontsのウェブフォントを読み込む方法をメモしておきます。Google Fontsは無料かつ無登録でウェブフォントを利用できるので、Web Font Loaderを手軽に試すことが出来ます。入門としてどうぞ。

手順１: Web Font Loaderを読み込む

Web Font Loaderを利用するために、最初にwebfontloader.jsを読み込みます。GitHubのtypekit/webfontloaderリポジトリから最新のwebfontloader.jsをダウンロードして読み込んでもいいですし、下のようにGoogleのCDNなどでホストされているファイルを利用する方法もあります。お好みで。

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>

webfontloader.jsを読み込むとグローバルなオブジェクトWebFontが利用できるようになります。

手順2: WebFont.load()に設定オブジェクトを渡す

WebFontにはloadというメソッドが用意されており、WebFont.load()に設定オブジェクトを渡すことでウェブフォントのロードが開始されます。

//設定オブジェクト
var config = {
	google: {
		families: ['Gloria Hallelujah', 'Lobster']
	}
};

//ウェブフォントの読み込み開始
WebFont.load(config);

このように設定オブジェクトはgoogleというプロパティをもち、google.familiesにロードしたいフォント名を配列として列挙します。

手順3: CSSでfont-familyを指定

あとはcssでfont-familyを指定するだけです。

h1{
  font-family: 'Gloria Hallelujah', cursive;
}

h2{
  font-family: 'Lobster', cursive;
}

ここまでの手順をデモページでみる

これだけではGoogle Fontsのスタイルシートを読み込むのと大差ありませんが、これがベースとなるWeb Font LoaderとGoogle Fontsの設定方法となります。ここからコールバック等、発展的な使用方法に移っていくわけですね。