webfontloaderでWebフォントの読み込みを行う

JavaScriptのライブラリ「webfontloader」で、Webフォント読み込み時のコントロールを追加してみます。

webfontloaderを使用しない場合

まずは普通にWebフォントを設定してみます。

HTML

<p class="genshinGothic">源真ゴシック</p>

CSS

@font-face {
	font-family: 'GenShinGothic';
	src: url('GenShinGothic-Regular.eot');
	src: url('GenShinGothic-Regular.eot?#iefix') format('embedded-opentype'),
		 url("GenShinGothic-Regular.woff") format('woff'),
		 url('GenShinGothic-Regular.ttf') format('truetype');
}
.genshinGothic {
	font-family: 'GenShinGothic';
	font-size: 24px;
}

Webフォント設定のデモページ
IEだとWebフォントが読み込まれるまでの間はデフォルトのフォントで描画され、Google ChromeやFirefoxではWebフォントが読み込まれるまでの一定時間(最大3秒)テキストの描画を保留するようです。
　

webfontloader

webfontloaderを使ってみます。
今回はCDNを使用しますが、ダウンロードする場合はGitHubのページからダウンロードして使用してください。
先ほどのサンプルにwebfontloaderの読み込みを追加します。

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

webfontloaderで設定できるイベントを一通り設定してみます。

JavaScript

WebFont.load({
	custom: {
		families: ['GenShinGothic'],
		urls: ['sample.css']
	},
	loading: function() {
		console.log('loading');
	},
	active: function() {
		console.log('active');
	},
	inactive: function() {
		console.log('inactive');
	},
	fontloading: function(familyName, fvd) {
		console.log('fontloading', familyName, fvd);
	},
	fontactive: function(familyName, fvd) {
		console.log('fontactive', familyName, fvd);
	},
	fontinactive: function(familyName, fvd) {
		console.log('fontinactive', familyName, fvd);
	}
});

Webフォントの読み込み開始時や完了時に、consoleが表示されました。
webfontloaderのデモページ
　

先ほどのサンプルでは確認できませんでしたが、inactive()やfontinactive()は以下のように表示されます。
Webフォントの読み込みに失敗した場合のデモページ
　

Webフォントを複数読み込む

Webフォントを複数読み込む場合も、webfontloaderの設定にフォント名を追加するのみでOKです。

HTML

<p class="genshinGothic">源真ゴシック</p>
<p class="jkgl">JKゴシックL</p>

CSS

@font-face {
	font-family: 'GenShinGothic';
	src: url('GenShinGothic-Regular.eot');
	src: url('GenShinGothic-Regular.eot?#iefix') format('embedded-opentype'),
		 url("GenShinGothic-Regular.woff") format('woff'),
		 url('GenShinGothic-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'jkgl';
	src: url('JKG-L_3.eot');
	src: url('JKG-L_3.eot?#iefix') format('embedded-opentype'),
		 url("JKG-L_3.woff") format('woff'),
		 url('JKG-L_3.ttf') format('truetype');
}
.genshinGothic {
	font-family: 'GenShinGothic';
	font-size: 24px;
}
.jkgl {
	font-family: 'jkgl';
	font-size: 24px;
}

JavaScript

WebFont.load({
	custom: {
		families: ['GenShinGothic', 'jkgl'],
		urls: ['sample.css']
	},
	loading: function() {
		console.log('loading');
	},
	active: function() {
		console.log('active');
	},
	inactive: function() {
		console.log('inactive');
	},
	fontloading: function(familyName, fvd) {
		console.log('fontloading', familyName, fvd);
	},
	fontactive: function(familyName, fvd) {
		console.log('fontactive', familyName, fvd);
	},
	fontinactive: function(familyName, fvd) {
		console.log('fontinactive', familyName, fvd);
	}
});

Webフォントを複数読み込む場合のデモページ
　

Google Fonts

Google Fontsを使用する場合は以下のように設定します。

<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />

HTML

<p class="wf-roundedmplus1c">Rounded M+ 1c</p>
<p class="wf-hannari">はんなり明朝</p>
<p class="wf-nicomoji">ニコモジ</p>

CSS

.wf-roundedmplus1c {
	font-family: "Rounded Mplus 1c";
}
.wf-hannari {
	font-family: "Hannari";
}
.wf-nicomoji {
	font-family: "Nico Moji";
}

JavaScript

WebFont.load({
	google: {
		families: ['Rounded Mplus 1c', 'Hannari', 'Nico Moji']
	},
	loading: function() {
		console.log('loading');
	},
	active: function() {
		console.log('active');
	},
	inactive: function() {
		console.log('inactive');
	},
	fontloading: function(familyName, fvd) {
		console.log('fontloading', familyName, fvd);
	},
	fontactive: function(familyName, fvd) {
		console.log('fontactive', familyName, fvd);
	},
	fontinactive: function(familyName, fvd) {
		console.log('fontinactive', familyName, fvd);
	}
});

Google Fontsの場合のデモページ
　

Webフォントが読み込まれるまでのフォント表示の対応

最初のwebfontloaderを使用しないサンプルで書いたように、特にIEでWebフォントが読み込まれるまでデフォルトのフォントが表示されてしまいます。
webfontloaderを使用している場合、Webフォントの読み込み完了後にHTML要素にclassが付与されるため、これを使って対応してみます。

HTML

<p class="genshinGothic">源真ゴシック</p>
<p class="jkgl">JKゴシックL</p>

デフォルトではopacity: 0にして、HTMLにclassが追加されるとopacity: 1になるようにします。

CSS

@font-face {
	font-family: 'jkgl';
	src: url('JKG-L_3.eot');
	src: url('JKG-L_3.eot?#iefix') format('embedded-opentype'),
		 url("JKG-L_3.woff") format('woff'),
		 url('JKG-L_3.ttf') format('truetype');
}
.genshinGothic {
	font-family: 'GenShinGothic';
	font-size: 24px;
	transition: opacity 300ms;
	opacity: 0;
}
.jkgl {
	font-family: 'jkgl';
	font-size: 24px;
	transition: opacity 300ms;
	opacity: 0;
}

/* 読み込み完了後 */
.wf-genshingothic-n4-active .genshinGothic {
	opacity: 1;
}
.wf-jkgl-n4-active .jkgl {
	opacity: 1;
}

JavaScript

WebFont.load({
	custom: {
		families: ['GenShinGothic', 'jkgl'],
		urls: ['sample.css']
	},
	loading: function() {
		console.log('loading');
	},
	active: function() {
		console.log('active');
	},
	inactive: function() {
		console.log('inactive');
	},
	fontloading: function(familyName, fvd) {
		console.log('fontloading', familyName, fvd);
	},
	fontactive: function(familyName, fvd) {
		console.log('fontactive', familyName, fvd);
	},
	fontinactive: function(familyName, fvd) {
		console.log('fontinactive', familyName, fvd);
	}
});

Webフォントが読み込まれてから表示するデモページ
　

【参考サイト】

• typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face.
• JSでWebフォントのロード開始や完了などを判定するWeb Font Loader | ITハット