今回は前回の続きでWeb Font Loaderについて紹介します。
Web Font LoaderとはGoogleとTypekitが共同開発したライブラリです。
Google・Typekit・Fonts.com・Fontdeckの中から好きなウェブフォント選んで
ウェブサイトに組み込むことができます。
また、ウェブフォントが読み込まれたタイミングや使用可能になったタイミングなどを
Web Font Loaderのコールバック関数で知ることができます。
さらにウェブフォントが適用されるタイミングに合わせて
ウェブフォントが適用される要素にwf-loading、wf-inactive、wf-activeというクラス名が付きます。
ここからはWeb Font Loaderの使用方法などの説明に移ります。
■Web Font Loaderの使用方法
ここではGoogleのウェブフォントを使用する方法を説明します。
まずWeb Font Loaderのライブラリをスクリプトタグで読み込ませます。
ここでは最新版1.6.15のライブラリを使用します。
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.15/webfont.js"></script>
次に読み込ませるウェブフォントの設定を行います。
Google Fontsのサービスからウェブフォントのfont-familyを指定します。
下記では「Gloria Hallelujah」というfont-familyを設定しています。
そしてstyleでfont-familyを指定するとフォントが適用されます。
※@font-faceの指定が無い場合、デフォルトで下記の設定が反映されます。
@font-face { font-style : normal; font-weight : normal;}
■ウェブフォントが適用されるタイミング
ウェブフォントが適用されるタイミングは
Web Font Loaderのコールバック関数で知ることができます。
コールバック関数で様々な処理ができるのでとても便利です。
下記にコールバック関数についてまとめています。
<script>
var cfg = {
// ウェブフォントがロードが開始されたとき
loading() {
},
// ウェブフォントが使用可能になったとき
active() {
},
// ブラウザがウェブフォントをサポートしていないとき
inactive() {
},
// fontFamilyのロードが開始されたとき
fontloading(fontFamily, fontDescription) {
},
// fontFamilyが使用可能になったとき
fontactive(fontFamily, fontDescription) {
},
// ブラウザがfontFamilyをサポートしていないとき
fontinactive(fontFamily, fontDescription) {
}
};
</script>
コールバック関数のfontloadingとfontactive、fontinactiveには
引数としてfont-familyとその説明が渡されます。
■自前で用意したフォントを適用する
Web Font Loaderでは自前で用意したフォントを適用することができます。
下記コードが自前で用意したフォントを適用する方法です。
@font-faceに用意したフォントを読み込みます。
そしてfamiliesにfont-familyを設定することでフォントが適用されます。
<script>
var cfg = {
custom : {
families: ['Font']
}
};
WebFont.load(cfg);
</script>
<style>
@font-face {
font-family : 'Font';
src : url('xxx.woff') format('woff');
}
</style>
■各ブラウザのウェブフォントの挙動
各ブラウザでウェブフォントのロードが完了するまでの挙動が違うので紹介します。
・IE
ウェブフォントのロードが完了するまで代価フォントが適用され、ロード完了後ウェブフォントが適用されます。
・Chrome、FireFox
テキストの表示が3秒間保留にされます。
その後代替フォントが適用され、ロード完了後ウェブフォントが適用されます。
・Safari
ウェブフォントのロードが完了されるまでテキストの表示が保留にされます。
各ブラウザでウェブフォントの挙動が全く違うのがわかると思います。
下記にWeb Font Loaderを用いた改善方法を記述しているので参考にしてください。
Web Font Loaderではフォントが適用されるタイミングで
フォントが適用される要素ににwf-loading、wf-active、wf-inactiveというクラスがつきます。
wf-loadingはウェブフォントがロードが開始されたときです。
wf-activeはウェブフォントが使用可能になったときです。
wf-inactiveはブラウザがウェブフォントをサポートしていないときです。
このクラスを使うことにより各ブラウザの違いや描画のちらつきを改善できます。
下記コードが改善の例です。
ロード中にフォントが適用される要素を非表示にして、
ロード完了後にフォントが適用される要素を表示するように設定しています。
h1 {
font-family: 'Gloria Hallelujah';
}
.wf-loading h1 {
visibility : hidden;
}
.wf-active h1 {
visibility : visible;
}
以上がWeb Font Loaderの説明になります。
今回例に挙げたGoogleの他、Typekit、Fonts.com、Fontdeckも
同じような使用方法でウェブフォントを組み込むことができます。
またコールバック関数やウェブフォントが適用される要素につくクラスを
使用することにより各ブラウザの動作を共通化することができます。
共通化することにより各ブラウザの差異をなくすことができます。
今回紹介したWeb Font Loaderの他にも
様々なライブラリがあるので自身にあったライブラリを見つけてみてください。
＜参考サイト＞
・Web Font Loader
＜付録＞
Web Font Loaderを用いた簡単なサンプル
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>サンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
var cfg = {
google: {
families: ['Gloria Hallelujah']
},
// ウェブフォントがロードが開始されたとき
loading : function() {
},
// ウェブフォントが使用可能になったとき
active : function() {
},
// ブラウザがウェブフォントをサポートしていないとき
inactive : function() {
},
// fontFamilyのロードが開始されたとき
fontloading : function(fontFamily, fontDescription) {
},
// fontFamilyが使用可能になったとき
fontactive : function(fontFamily, fontDescription) {
},
// ブラウザがfontFamilyをサポートしていないとき
fontinactive : function(fontFamily, fontDescription) {
}
};
WebFont.load(cfg);
</script>
<style>
h1 {
font-family: 'Gloria Hallelujah';
}
.wf-loading h1 {
visibility : hidden;
}
.wf-active h1 {
visibility : visible;
}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>