Webフォントを遅延して読み込ませる

Webフォントを遅延して読み込ませることができるかを試してみました。

サンプルコード

最初に自サーバからフォントを読み込む形を試してみます。
まずはなにも対応しないで実装してみます。

style.css

@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 200;
	src: url("./font/NotoSerifCJKjp-ExtraLight.woff") format("woff");
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 300;
	src: url("./font/NotoSerifCJKjp-Light.woff") format("woff");
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 400;
	src: url("./font/NotoSerifCJKjp-Regular.woff") format("woff");
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 500;
	src: url("./font/NotoSerifCJKjp-Medium.woff") format("woff");
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 600;
	src: url("./font/NotoSerifCJKjp-SemiBold.woff") format("woff");
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 700;
	src: url("./font/NotoSerifCJKjp-Bold.woff") format("woff");
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 900;
	src: url("./font/NotoSerifCJKjp-Black.woff") format("woff");
}

body {
	font-family: 'Noto Serif JP', serif;
}

Noto Serif JPの各ウェイトを読み込むようにしています。
自サーバからWebフォントを読み込むデモページ
　

次に対応方法ですが、Webフォントを読み込む部分を任意のタイミングでhead内に追加するようにすればいいようです。
Webフォントの読み込み部分を別ファイルに分けます。

font.css

@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 200;
	src: url("./font/NotoSerifCJKjp-ExtraLight.woff") format("woff");
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 300;
	src: url("./font/NotoSerifCJKjp-Light.woff") format("woff");
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 400;
	src: url("./font/NotoSerifCJKjp-Regular.woff") format("woff");
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 500;
	src: url("./font/NotoSerifCJKjp-Medium.woff") format("woff");
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 600;
	src: url("./font/NotoSerifCJKjp-SemiBold.woff") format("woff");
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 700;
	src: url("./font/NotoSerifCJKjp-Bold.woff") format("woff");
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 900;
	src: url("./font/NotoSerifCJKjp-Black.woff") format("woff");
}

style.css

body {
	font-family: 'Noto Serif JP', serif;
}

Webフォントの読み込み部分をfont.cssに分けました。

JavaScriptでfont.cssをhead内に追加するようにします。
今回は分かりやすいように、ボタンをクリックした時に追加するようにしてみます。

JavaScript

$(function() {
	$('#btn').on('click', function() {
		var fontUrl = './font.css';
		var fontCss = $('<link>').attr('rel', 'stylesheet').attr('href', fontUrl);
		$('head').prepend(fontCss);
		$(this).hide();
	});
});

これで最初はWebフォントを読み込まないで、ボタンクリック後にWebフォントを読み込むようにすることができました。
任意のタイミングで自サーバからWebフォントを読み込むデモページ

実際に使う場合、ページ読み込み後に実行するようにするとよさそうです。

JavaScript

$(window).on('load', function() {
	var fontUrl = './font.css';
	var fontCss = $('<link>').attr('rel', 'stylesheet').attr('href', fontUrl);
	$('head').prepend(fontCss);
});

次にGoogle Fontsからフォントを読み込む場合を試してみます。
まずはなにも対応しないで実装してみます。

head内でWebフォントを読み込みます。

head

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP:200,300,400,500,600,700,900" rel="stylesheet">

CSS

body {
	font-family: 'Noto Serif JP', sans-serif;
}

Google FontsからWebフォントを読み込むデモページ
　

対応方法ですが、基本的には自サーバから読み込む場合と同じです。
JavaScriptでWebフォントの読み込みをhead内に追加するようにします。

JavaScript

$(function() {
	$('#btn').on('click', function() {
		var fontUrl = 'https://fonts.googleapis.com/css?family=Noto+Serif+JP:200,300,400,500,600,700,900';
		var fontCss = $('<link>').attr('rel', 'stylesheet').attr('href', fontUrl);
		$('head').prepend(fontCss);
		$(this).hide();
	});
});

任意のタイミングでGoogle FontsからWebフォントを読み込むデモページ
先ほどと同様にボタンをクリックした時に追加するようにしていますが、ページ読み込み後に実行したい場合は以下のようにすればOKです。

$(window).on('load', function() {
	var fontUrl = 'https://fonts.googleapis.com/css?family=Noto+Serif+JP:200,300,400,500,600,700,900';
	var fontCss = $('<link>').attr('rel', 'stylesheet').attr('href', fontUrl);
	$('head').prepend(fontCss);
});

【参考サイト】

• Webフォントの非同期読み込み – Hail2u
• Google Web Fonts を非同期で読み込みをして表示改善する方法 – HAM MEDIA MEMO