こんにちは、ロクナナワークショップ事務局です。今日は、先日スタートした、font+という革新的なサービスを紹介しましょう。

font+とは、CSS3で実装予定の@font-face いわゆるWebFontを日本語環境で使いやすくしてくれるサービスです。

和文フォントは文字数の多さからフォントファイルの容量が多くなってしまいがちで、日本語のWebサイトでWebFontを利用することは現実的ではありませんでした。しかし、font+を利用すると、サイト内のテキストデータを取得して必要な文字のみのフォントファイルをダウンロードしてくれるので、とても軽量ですみます。


■Webのフォント事情
WebFontが実装される前は、各端末やOSでインストールされているフォントが違うので、全ての環境で同じ書体のテキストデータを表示させることは不可能でした。

Mac は、標準インストールされているフォントが比較的読みやすく、きれいに表示されるのであまり問題視する必要はありませんでしたが、XP以前の Windowsに共通でインストールされていたMSゴシックは、あまりきれいではなく、多くのデザイナーはこの制限に頭を抱えていました。

Vista 以降では、ClearType(Windowsにおける文字のアンチエイリアス方式)に対応しているフォントのメイリオが最初からインストールされていたので、以前に比べれば格段にきれいに表示できるようになったものの、フォントの選択肢が少ないことに変わりはなく、フォント毎の幅や高さの違いでスタイルが崩れることも少なからずあります。

フォントを制限されず、どんなPC・スマートフォンでも、同じフォントで出力できれば表現の幅が広がり、フォントのために画像を使うなどの工夫も必要なくなるので、動的な出力にも柔軟に対応できるようになります。

■CSS3で実装される@font-face
そのような問題を解決すべく、CSS3では@font-face いわゆるWebFontが策定される予定で、多くのモダンブラウザですでに利用可能です。

WebFontは、フォントファイルをHTMLと同じようにWebサーバ上にアップロードしておき、ユーザーがページを開く際、ダウンロードして表示に使う仕組みです。

一見とても便利そうな新機能ですが、これには無視できない大きな問題が2つあります。

1つ目はファイルの容量です。欧文フォントであれば、数KB~数百KB程度なのでそれほど気にすることでもありませんが、和文フォントは、文字数が多く複雑なため、大きいファイルだと8MB以上のものも存在します。

ページを読み込むたびに8MBのファイルをダウンロードするのはとても現実的ではありません。

2つ目はライセンス問題です。フォントファイルを、不特定多数のユーザーにダウンロードさせて使うのですから、この問題も無視できません。普通のライセンス料金ではおそらく利用できないでしょう。

GoogleのWeb Fontsでも和文フォントは利用できない


■font+で解決!
font+では、この2つの大きな問題を解決してくれます。
font+に登録すると得られるJavaScriptを、ページ内に貼り付けると、ページ内で使われてる文字を数え、必要なフォントのみを圧縮してサーバからダウンロードします。

この処理のおかげで、ファイルサイズは劇的に少なくなり、標準的なテキスト量のページで約30KBまで圧縮されます。

利用料金は静的なページであれば固定ですが、動的に出力されるサイトではアクセス数に応じた料金となっています。1アクセス毎にフォントデータがダウンロードされるのですから、フォントのライセンス料と考えれば理にかなった料金形態となります。

フォントベンダーに、別途ライセンス料を払うなどの必要もなく、大手ベンダーの相当数なフォントが、利用可能となっています。

Font+のサンプルページ 静的なページではJavaScriptは必要ない


■デメリットは?
ページのロードが完了してから、JavaScriptが動作し、フォントデータをダウンロードして、初めてフォントが適応されるので、どうしてもページを開いた一瞬は、標準のフォントが表示されてしまいます。

JavaScriptが動作しない環境では表示ができません。
利用料金も、自らフォントベンダーにライセンス料を支払うより、よほど低価格で容易に利用できるとは思いますが、気軽に利用できる価格ではありません。

■動的なページでは課題が残るが
前述では、動的なページの場合を例にとりましたが、静的なページでは、圧縮されたフォントファイルを事前に獲得できるので、JavaScriptを使わずに利用できます。

フォントファイルをサーバーに自らアップしておくことで、より自然にWebFontが利用できるのです。

WebFontが日本でも現実的なレベルで使えるようになったことはとても意味があることだと思います。このサービスを皮切りに、より気軽にWebFontが使える環境になったらよいですね。

Webに関わる制作者としては、こういった新しいサービスや、技術・表現方法などに敏感に、様々なコンテンツ制作にチャレンジしていきましょう!

WebFont以外にも、HTML5関連の新技術は、世界中で話題の中心にあります。
ロクナナワークショップでは、2011年8月20日(土)に、セミナーイベント「羽田野太巳の 厳選 今すぐ使えるHTML5 API」を開催します。



この機会に「HTML5 API」を習得し、表現の幅を広げてみてはいかがでしょう!


フォントプラス
羽田野太巳の 厳選 今すぐ使えるHTML5 API
ロクナナワークショップ

【ロクナナワークショップ通信】の記事をもっとみる
2011年はWeb名刺が流行る!?
Android旋風!魅力的なガラパゴス機能 VS 高い更新性
Flash・AIR・HTML5・Androidアプリまで動く!新OS「MeeGo」とは?
映画はDVDからストリーミングへ!動画投稿サイトの動向を探る