デモページはこちら

Webフォントの読み込みにWeb Font Loader（webfont.js）を利用します。Web Font LoaderはGoogleとTypekitが共同開発したフォントの読み込みを制御できるJavaScriptライブラリです。

Web Font LoaderはCDN提供されています。headタグ内に貼り付け用のコードです。

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

JavaScript側でフォント名を指定します。以下はGoogle Fonts読み込みの場合です。Web Font Loaderを使用する場合、html側やCSS側でWebフォントを読み込む必要はありません。

WebFont.load({
	google: {
		families: ['Parisienne', 'Quicksand:300,400', 'Noto+Sans+JP']
	}
});

CSSファイル内でフォントを使用したい箇所にfont-familyで指定すると、読み込んだWebフォントが表示できます。なお、Webフォントが読み込まれるまで代替フォントが表示されるのを防ぐため、opacityの設定をしています。クラス名wf-activeはWebフォント読み込み後、htmlタグに付与されます。

.wf-parisienne {
	font-family: 'Parisienne', cursive;
	opacity: 0;
}
.wf-quicksand {
	font-family: 'Quicksand', sans-serif;
	opacity: 0;
}
.wf-active .wf-parisienne {
	font-family: 'Parisienne', cursive;
	opacity: 1;
}
.wf-active .wf-quicksand {
	font-family: 'Quicksand', sans-serif;
	opacity: 1;
}