WebFontLoaderで外部Webフォントを読み込み、CreateJsで生成する文字に適用する。

前の記事でFF14プレイヤー向けに記事を書きました。
blog.gelehrte.com

この中の技術がどのようにして行われているかをメモしておきます。

自作フォントをWebFontLoaderで読み込む

CSS

CSSではフォントを指定しているだけです。

@font-face{
font-family:'Norvrandt';
src:url('https://gelehrtecrest.github.io/norvrandt-font/fonts/Norvrandt-Regular.woff') format('woff');
}

JS

WebFontLoader

今回はCDNを使用してJSファイルをダウンロードしています。

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

正しくは、GitHub上に公開されているwebfont.jsをダウンロードして使用した方が良いでしょう。
github.com

JavaScript側ではサンプルを参考にダウンロードを行いました。

        WebFont.load({
		custom: {
			families: ['Norvrandt'],
			urls: ['style.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);
		}
	});

CreateJS

CreateJsでCanvasに文字を指定する時にはフォント名を登録する必要があります。

new createjs.Text(テキスト, フォント, 色);

この時フォントは、ブラウザを起動しているPCのフォントが使用されるのですが、WebFontLoaderでダウンロードしたフォントも使用することが可能です。

まぁブラウザ上にフォントをダウンロードしているから当たり前といえばそうなのですが。
これで自作フォントを使用してのCanvas表示ができるようになりました。

応用例

Canvasで自作フォントが利用できるということは、Apple Watchなどに使われる小さなアプリでも自作フォントを使用することができるということです。
まだアプリ制作をためしていませんが、今後のための備忘録として記録を残しておきます。

今回はここまで。それでは。

追記：はてなブログなどのブログ記事で、Webフォントを使う方法について

最近、この記事を見ていただける人がいらっしゃるようなので追記。
こちらのブログ記事で、はてなブログなど記事内でCSSを実行できる場合、記事内でWebフォントを使うことができる例を書きました。
参考になれば幸いです。

blog.gelehrte.com