ウェブフォントを作ろうと思っても、実際フォントを作るのはたいへん。
とはいえ実際に公式に無料でウェブフォントとして使えるフォントは
・M+フォント
・Source Han Sans（源ノ角ゴシック）(Noto Sans）
IPA FONTは再配布あたるとの回答が出ているので
通常の方法では難しいかもしれません。
そして無条件で改変して、再配布しても大丈夫なのは
おそらく、M+と源ノ角という事になります。
というわけで源ノ角ゴシックを使ってウェブフォント
の作り方を紹介します。
今回はレギュラーに加えて90％、80%、70 %の細長い書体
も同時に作ってみました。普通じゃつまらないので。
フォントを触るときは、やっぱり1つはフォント作成ソフト
があると便利です。
・OTEditかTTEdit
・Fontographer
・Glyphs
ぐらいがメジャーどころでしょう。今回程度であれば
なくてもなんとかなりそうですが。
1.フォントのサブセット化
日本語フォント全部をアップすると数メガ、いや10メガを越えてしまう
場合が多いので、まるごとアップすると、表示に時間がかかり
ウェブサイトしては致命的です。
なので、「かな」やアルファベットやよく使う記号などのみにして
漢字は「メイリオ」や「ヒラギノ」などが自動的に表示される様にします。
これはサブセットフォントメーカーを使って文字を減らします。
ウェブサービスでも、できる所もあります。
今回は4種類のフォントを作りました。
横幅が100%~70%までの4段階を作っています。
サブセットフォントメーカーはすごく簡単です。
フォントを選んで、フォントにしたい文字をテキストで記述するだけ。
2.ウェブフォントに変換
ウェブフォントの変換にはWOFFコンバータを使います。
もしすでにインストール済みであれば自動的に立ち上がります。
フォント名はJapanSansとしておきました。
あとは「変換開始」をクリックするくらいです。はいできあがり。
できあがったファイルは以下。サンプルのHTMLファイルも書き出されます。
これは必要ないので削除してください。
TrueTypeが必要なら、フォントソフトなどで書き出してください。
ここまで30分。そして適用してみたウェブサイトがこちら。
http://webfontfan.com/japansans/
実際には、調整にかなりの時間を要します。
というのもWindowsはフォントレンダリングが独特なので
多くの場合綺麗に表示されないからです。
とくに今回のフォントのように、微妙で、繊細なラインは
表示の調整が難しくなりがちです。
どちらかというとM+の様に水平のラインが平行な方が
調整はしやすいです。
フォントレンダリングの確認はMac、Windowsの各OSや
IE、Safari、Chrome、Operaなどのブラウザで一通り確認します。
あとはiOSやAndroidなどでも実機で確認できたらしておいた方が良いでしょう。
