自由に使えるWEBフォント「JapanSans」登場。サブセット化済みで導入もかんたん！

WEBフォントとは、WEBサーバーに仕込んでダウンロードさせることにより、クライアント側のフォント環境に関係なくブラウザー上で表示させることのできるフォント。今回紹介するフォント「JapanSans」はWEBフォントとして使うのに最適な状態で配布されている、商用・非商用を問わず使用可能な無料のフォントだ。

自分のサイトでWEBフォントを使ってみたい、と思っている人は少なくないと思う。ハードルが高そうで手を出せないでいた人も、「JapanSans」ならかんたんに導入できると思う。

以下、導入手順。

1 その1　JapanSansをダウンロードする
2 その2　JapanSansファイル一式をサーバーに置く
3 その3　フォントファイルの指定をCSSに記述する
4 その4　フォントを適用したい部分にフォント指定を記述する
5 WOFFコンバータ
6 コンバージョン(オンラインサービス)
7 サブセットフォントメーカー

その1　JapanSansをダウンロードする

下記の公式サイトからダウンロード。「安心してダウンロードして下さい」って書かれている。

＜公式サイト＞

[browser-shot url=”http://webfontfan.com/japansans/?p=20″ width=”300″]

ダウンロードしたファイル”JapanSansFont-free.zip”を解凍すると、”ウェブフォント用”と”印刷用”のフォルダができる。今回はウェブフォントの方を使う。

フォルダ内にはフォントサイズ70、80、90、100の4通りのフォントがそれぞれ4種類ずつ入っている。今回はサイズ100のフォントを導入してみることにする。

その2　JapanSansファイル一式をサーバーに置く

FTPなどを使って自サイトのWEBサーバーに”JapanSans”の名前でフォルダを作り、その中に先ほどのウェブフォントフォルダーの中の”JapanSans100.eot”、”JapanSans100.otf”、”JapanSans100.ttf”、”JapanSans100.woff”の４ファイルを置く。

その3　フォントファイルの指定をCSSに記述する

Style.css等のファイルに次の記述を追記する。

@font-face {
 font-family: 'JapanSans80';
 src: url('http://自サイトURL/JapanSans/JapanSans100.eot');
 src: url('http://自サイトURL/JapanSans/JapanSans100.eot?#iefix') format('embedded-opentype'),
 url('http://自サイトURL/JapanSans/JapanSans100.woff') format('woff'),
 url('http://自サイトURL/JapanSans/JapanSans100.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 }

その4　フォントを適用したい部分にフォント指定を記述する

h1タグやbodyタグに指定したときは、CSSファイル内のフォント指定の部分を下記のコードに書き換える。

font-family:'JapanSans80','ヒラギノ角ゴ Pro W3','Hiragino Kaku  Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;

特定のページで特定の部分にだけ使用したいときは、HTMLタグ上でフォント指定。

サンプル

実際に使ってみるとこういう感じ。

生きているということ
いま生きているということ
それはのどがかわくということ
木もれ日がまぶしいということ
ふっとあるメロディを思い出すということ
くしゃみをすること
あなたと手をつなぐこと

WEBフォントは漢字なども含めて全部のフォントを読み込ませると表示に時間がかかる。この負担を軽減させるためにあらかじめフォントファイルを使用する文字の分だけにして不要な文字を除外しておく。これを「サブセット化」という。JapanSansはサブセット化済みなのでとても軽い。だがそのために、数字・アルファベット・かな文字以外は表示できないので、不足分を’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Pro’,’メイリオ’,Meiryo,’ＭＳＰゴシック’,’MS PGothic’などで補う必要がある。

なお、導入方法の詳細は公式サイトに詳しく載っている。

今回のJapanSansのように全てのファイルが用意されていれば導入は易しい。このファイルさえ揃えられれば、ネット上で公開されているフリーのフォントでライセンス的に問題のないものならば、自力でWEBフォントとして導入することができる。

以下、WEBフォント化に役立つツールを紹介する。