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のデモページ
 

loading() 全てのWebフォントの読み込みが開始されたときに発火。
active() 全てWebフォントの読み込みが完了したときに発火。
inactive() 全てWebフォントの読み込みが失敗したときに発火。
fontloading(familyName, fvd) 1つのWebフォントの読み込みが開始されたときに発火。
familyNameにフォント名、fvdにフォントのスタイルとウェイトが入る。
fontactive(familyName, fvd) 1つのWebフォントの読み込みが完了したときに発火。
familyNameにフォント名、fvdにフォントのスタイルとウェイトが入る。
fontinactive(familyName, fvd) 1つのWebフォントの読み込みが失敗したときに発火。
familyNameにフォント名、fvdにフォントのスタイルとウェイトが入る。

先ほどのサンプルでは確認できませんでしたが、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フォントが読み込まれてから表示するデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

1件のコメント

  1. […] 参考: webfontloaderでWebフォントの読み込みを行う […]

【自分用メモ】源ノ明朝をWebフォントで使うときのコツ – WeST へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31