Webフォントとは

2013/06/20
タグ: webフォント

ウェブブラウザではそのパソコンにインストールされているフォントを使用してページを表示します。基本的にフォントの表現は機種依存であり、クライアントがWindowsかMac、もしくはLinuxかによっても見た目が異なってきます。

このことはサイト制作者の意図したフォントで表示することができない場合があることを意味します。

このため、見栄えのよいフォントで見出しなどを作りたいという場合には、画像化して使うという手法が用いられてきました。

テキストを画像化したものについてはalt属性でその内容を記することができますが、本文や見出しなどに、プレーンなテキストで入力したものと、画像化したもののどちらがユーザーに優しいかということを考えると言わずもがなかと思います。当然、どちらが検索エンジンにサイト内容を伝えやすいかも想像につきます。

INDEX

CSS3で実装されたwebフォントはあらかじめサーバ上にアップしたフォントをブラウジングするクライアント側で表示することができます。（正確にはwebフォントはCSS2以前でも存在していましたが、仕様や互換性の面で実用的ではありませんでした）

Webフォントのフォーマットとしては、SVG系などもあるのですが、現状で考えるとTrueType・OpenType・WOFF、そしてIE8など旧ブラウザ用にEOTを考えておけばよいと思います。

WOFFはW3CがWeb標準のひとつとして勧告したもので、TrueTypeまたはOpenTypeをテーブル単位で圧縮して独自のヘッダ情報やXML形式のメタデータを付加した形式となっています。TrueType・OpenTypeから変換することもできます。

Firefox 3.6/Chrome 6.0/IE9.0以降などの多くのブラウザが対応しており、今後のスタンダードといえそうです。

これまでデザイン的な要素から画像で使っていたものが、テキストで表現できるわけです。このことはユーザービリティだけでなく、サイト更新のスピードにも影響します。

このサイトのメインタイトル部分は手書き風のwebフォントを使用していますが、従来ですと、このような表現をしたければ、Illustratorなどを使い、希望のフォントで入力して画像化、それを配置するという作業が必要でした。

このサイトはWordPressで構築しています。記事タイトルが自動的にh1のサイトタイトル部分に挿入するようにテーマ側で指定してありますので、記事を書くだけでこのような表現が実現できるのです。

この一文のようにここはこのフォントを使いたいなんていうことも、簡単に実現できてしまいます。

パソコン上にその都度フォントをロードさせるわけですから、その分の負荷はかかってしまいます。欧文の場合は大文字・小文字や記号を含めても256文字（最小限なら26文字×2）あれば、表現できますが、漢字・ひらがな・カタカナのある日本語では「重い・遅い」というデメリットと向かい合わなくてはなりません、

閲覧者はもちろんのこと、検索エンジンの評価もサイトの表示速度も重要なファクターだといわれていますので、このあたりをうまくコントロールしてあげる必要があるかと思います。

これについてはより軽いフォントフォーマットや必要文字だけのフォントファイルにするサブセット化という手法がありますが、個人的には見出しやタイトル部分に限定するというのが、現時点での実用ラインなのかなとも感じています。

webフォントではサーバにアップしてだれもがダウンロードできる状態になるわけですから、フォントのライセンスというものが関わってきます。

モリサワやフォントワークス、モトヤなど従来のフォントベンダーも有償のサービスとしてwebフォントに参入してきています。コストを掛けることができるウェブサイトであれば、これらのクオリティの高いフォントを使用できますが、なかなか難しいウェブサイトの方が多いのではと思われます。

一方でフリーフォントの多い欧米と違い日本語の場合はライセンスフリーの書体は非常に少ないです。
なにせ、常用漢字+ひらがな+カタカナですぐに数千文字にはなってしまいますから、手軽に作ることが難しいというのが現状です。

その中でも探してみると無料で使えるライセンスフリーの日本語書体は存在します。実際のwebフォントの表示サンプルを作ってみましたので、ご覧になってください。

いずれにしても、webフォントはデザイン・効率・SEOなどさまざまな面でサイト制作者にとっては魅力的な存在であり、十分に実用の域に入ってきているのは間違いなさそうです。

ウェブフォントで表現力アップ！