ストアアプリで使用する絵文字（文字フォント）の追加方法

Windows8 Windows8.1

概要
Windows8(Windows8.1)のストアアプリ開発でMSが提供している絵文字（フォント）以外のものをダウンロードして使用するまでの流れについてまとめる。

準備
1-1.フォントの準備
手順を書く上で、ストアアプリのプロジェクトに追加するフォントとして「Heydings Icons（A Free Icon Web Font | HeydonWorks）」を使用する。
上記のサイトからHeydings IconsのTTFファイルをダウンロードをしておく。
Heydings Iconsにはストアアプリで使えそうなアイコンが含まれています。どのようなものが含まれているかはダウンロードしたTTFファイルを開いて中を確認してみてください。
※Heydings IconsのTTFファイルを実行することでPCにHeydings Iconsのフォントを追加することが可能。

1-2.Web Font変換
ストアアプリで使用するフォントはWeb Font(WOFFフォント)でなければならないため、上記でダウンロードしたFFTファイルを変換する必要がある。
変換は「Font Squirrel（Free Fonts! Legit Free & Quality » Font Squirrel）」の「Webfont Generator(HomeのページからWebfont Generatorのタグをクリックする。)」を使用することで行うことができる。
「agreement」の欄にチェックを入れ、「Add Fonsts」ボタンをクリックし、先ほどダウンロードしたTTFファイルを選択する。
上記の作業を行うと、Web Fontに変換したファイルをダウンロードすることができる。（少々時間がかかる。）


プロジェクトでの作業
2-1.fontの配置
プロジェクトに1-2でダウンロードしたWebFontを配置する。（コピペでオッケー）
今回はfontsというフォルダを作成し、その中にファイルを配置した。

2-2.default.cssの編集
プロジェクトの中のdefault.cssの中に追加したフォントの情報（今回はHeydings）の情報を定義する。

@font-face {
    font-family:'Heydings';
    src:url('/fonts/heydings_icons-Webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}

2-3.フォントの適用箇所の編集
フォントを使用する箇所のcssには以下のような記述をすることで、2-2で設定したフォント（今回はHeydings）を適用する。
以下はHeydingsフォントを使用する箇所にfontDisplayクラスを定義するようにした例です。

.fontDisplay {
    font-family:'Heydings';
}

Heydingsの絵文字を挿入する箇所には以下のような記述を行います。
hogehogeというidに対してHeydingsのニコちゃんマーク（笑顔のマーク）を表示しています。

#hogehoge:before {
    content: 'y';
}

Heydingsの書くアイコンにはそれぞれ文字が割り当てられています。
（上記のニコちゃんマークではy）
この文字は、Windows8(Windows8.1)の「文字コード」を使用してHeydings Fontの中身を調べればわかります。
※「文字コード」は検索チャームに「文字コード」と入力することで検索することができます。
※「文字コード」のFontの欄をHeydingsにすることでHeydings Fontの中身を確認することができます。
※「文字コード」でHeydingsの中身を確認するためにはPCにHeydingsのフォントをインストールする必要があります。1-1でダウンロードしたTTFファイルからフォントをインストールしてください。


末筆
以上の手順を使用することで、Web Fontをストアアプリで使用することができます。
フリーで配布されているフォントを使用する際はフォントのライセンスに注意するようにしてください。（特にストアアプリを公開する場合）