Web Font Loaderを使ってGoogle Fontsのウェブフォントを読み込む方法をメモしておきます。Google Fontsは無料かつ無登録でウェブフォントを利用できるので、Web Font Loaderを手軽に試すことが出来ます。入門としてどうぞ。
手順1: 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の設定方法となります。ここからコールバック等、発展的な使用方法に移っていくわけですね。