Webサイトでフリーフォントを使う ―Webフォントとtypeface.jsを比較して
ウェブサイトで使われるフォントについてちょっと考えてみました。
ウェブページで使用されるフォントは、通常ユーザーが使用している環境に依存します。最新の
WindowsOSなら最初からメイリオフォントが入っているし、
MacOSならヒラギノフォントが入っています。その一方、
Windowsには最初からヒラギノフォントも
Osakaも入っていないし、同様に
MacOSに
MSPゴシックや
メイリオは入ってません。また、サイト製作者が自分のページで使いたいフォントがあったとしても、ユーザーの環境にそのフォントがインストールされていなければ、ユーザーはそのフォントを見ることができません。
しかし、
CSS3がモダンブラウザに実装されて以降は、
Webフォントを利用することで、サイト製作者が望むフォントですべてのユーザーにページを見てもらうことができるようになりました。ただし、この
Webフォントですが、和文フォントを利用するとき障害になることがいくつかあります。
ひとつは和文フォントのサイズが大きすぎることです。英文フォントはアルファベットと数字、記号だけの小規模の文字セットで済むので、英文フォントの多くが100KBかそれに満たない小さなサイズです。しかし、日本語の場合、千文字以上の漢字セットが必要となるため、どうしてもフォントデータが大きくなってしまいます。和文フォントの多くが8MBとかいう桁違いのサイズです。サイト閲覧者に8MBものデータをダウンロードさせるのは現実的に厳しいことで、さらにダウンロードが終わるまで(自分のADSL回線では8MBのダウンロードに1分前後かかりました)フォントが表示されないという問題があります。
ただ、これは
Webフォントを自分のサーバーに置いて利用するケースです。通常、サイト製作者は
Webフォントを
TypeSquareのような専門のWebサービスを通じて利用します。この場合だとページで使われる文字数に応じたサイズのフォントデータをダウンロードするだけで済むそうなので、和文フォントのサイズ問題は解消されます。とはいえ、これらのサービスは通常有料です。
もうひとつは、ささいな問題かもしれませんが、
Webフォントは文字サイズを小さくすると、アンチエイリアスがかからずギザギザに見えることがあり、小さい文字で表示しようとすると見栄えが悪くなる可能性があることです。これについてはこの後ほど
typeface.jsを利用したページとの比較で検証していきます。
Webフォントではないですが、好きなフォントで書かれたページを実現するために
typeface.jsを使用する方法があります。実際にフリーフォントで書かれたページを作ってみました。
瀬戸フォントという加工・改変OKなフォントです。
⇒
typeface.jsを使ったフリーフォントのページ 最新のFirefox、Chrome、IE9で動作確認

このデモページでは、瀬戸フォントのデータが入った
JavaScriptファイルを読み込んでいます。450KBと少し重めのデータですが、文字データをひらがな・ヒラガナと英数字・記号にしぼっているため、このサイズで済んでいるともいえます。漢字セットをフルに入れるとやはり
Webフォントと同様に数メガバイトになるため実用に耐えません。
ただ、
typeface.jsは、ページで使用する文字数にしぼってフォントデータを書き換えることができるので、手間はかかりますが読み込むフォントデータのサイズを実用範囲内に小さくすることが可能です。
typeface.jsのメリットはもうひとつあって、それは文字を
HTML5の
Canvasで描画していることです。文字描画にアンチエイリアスがかかるので、文字が小さくなっても見栄えが極端に悪くなるということはありません。
一方でデメリットもあります。まず、フォントデータを作るのに手間がかかることです。下記に
typeface.jsを導入する一連の手順を書いておきます。
もうひとつは、文字列をコピーするときの文字列選択に問題があることです。
typeface.jsは
HTML5の
Canvasで文字を描画しているので、本来文字列の選択はできません。ただ、実際にはスクリプトで文字列選択ができるように無理やり制御しているので、擬似的に可能となっています。ところが、こちらで何度か文字列選択とコピーをしてみると、選択した分の文字列がコピーされていなかったりと不具合がみられます。スクリプト自体が日本語に対応していないことも原因かもしれません。
また、
typeface.jsはアンチエイリアスがかかるものの、文字サイズを小さくしすぎると、その効果で文字自体が薄く見えてしまうことがあります。次に
Webフォントの文字と
typeface.jsの文字を文字サイズごとに比較してみました。動作環境は
Windows7、
Firefox19.0。
Webフォント 13px
typeface.js 13px
Webフォント 16px
typeface.js 16px
Webフォント 21px
typeface.js 21px
Google Chromeでは大き目の文字サイズにしても
Webフォントのギザギザが直らない模様。
Webフォント25px
typeface.js 25px
typeface.jsの導入方法
1、フリーフォント(TrueTypeかOpenTypeであること)を見つける。
JavaScriptファイルに変換するので、規約で加工・改変が可能かどうか確認しておく。
2、
typeface.jsのサイトでフリーフォントデータを
JavaScriptデータに変換してもらう(和文フォントは変換に結構時間がかかります)。
3、フォントセットに組み込む文字セットを指定して(英数字・記号・漢字・カナなど)ダウンロードする。文字セットの中にはチベット文字などまず使うことがないものが多く含まれているので、必要最低限の文字セットにすることでダウンロードサイズを小さくできる。
4、
typeface.jsファイルをダウンロードする。
5、HTMLエディタを開き、フリーフォントを使用するページに
typeface.jsと、ダウンロードしたフォントデータ(JavaScript)を埋め込む。
6、フリーフォントを使う
HTML要素の
font-familyをフリーフォント名に。またその要素の
class属性を”typeface-js”とする。
7、ローカルでページを開いて確認する。
-
JavaScript/Ajax, ブラウザ JavaScript, typeface.js, Webフォント, フォント