nkimraの日記

技術的なメモのブログ。

Fabric.jsでWebフォントが反映されない問題の対応

JavaScript

前回にCanvasにテキストを掲載した際にWebフォントが反映されない問題の対応策。
原因としてはWebフォントが読み込まれる前にCanvasを表示してしまうのが問題だった模様。

回避策1 WebFont Loaderを使う

<!DOCTYPE html>
<html lang="ja">
<head>
<mata charset="utf-8"/>
<title>fabric test</title>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border:1px solid;"></canvas>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script src="fabric.min.js"></script>
<script>
var c = new fabric.Canvas('canvas');
WebFont.load({
	google: {
		families: ['Fredoka One']
	},
	active: function() {
        var text = new fabric.IText('Hello world !', {
            fontFamily: 'Fredoka One',
            top: 100,
            left: 100,
            fontSize: 20
        });
	    c.add(text);
	},
});
</script>
</body>
</html>

JSFIDDLE

回避策2 setTimeoutを使う

<!DOCTYPE html>
<html lang="ja">
<head>
<mata charset="utf-8"/>
<title>fabric test</title>
<link href='http://fonts.googleapis.com/css?family=Fredoka+One' rel='stylesheet' type='text/css'>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border:1px solid;"></canvas>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script src="fabric.min.js"></script>
<script>
var c = new fabric.Canvas('canvas');
var text = new fabric.IText('Hello world !', {
    fontFamily: 'Fredoka One',
    top: 100,
    left: 100,
    fontSize: 20
});
setTimeout(function() {
    c.add(text);
}, 1000);
</script>
</body>
</html>

JSFIDDLE

setTimeoutを使う方法は公式サイトでも使用されていたけれど、
WebFont Loaderを使う方が無駄な待ち時間が無くてよさそう。
対応策を調べてた時に海外のサイトも見ていたけど、同じ問題に悩まされている人が結構いた。