ウェブブラウザではそのパソコンにインストールされているフォントを使用してページを表示します。基本的にフォントの表現は機種依存であり、クライアントが Windows か Mac 、もしくは Linux かによっても見た目が異なってきます。
このことはサイト制作者の意図したフォントで表示することができない場合があることを意味します。
このため、見栄えのよいフォントで見出しなどを作りたいという場合には、画像化して使うという手法が用いられてきました。
テキストを画像化したものについては alt 属性でその内容を記することができますが、本文や見出しなどに、プレーンなテキストで入力したものと、画像化したもののどちらがユーザーに優しいかということを考えると言わずもがなかと思います。当然、どちらが検索エンジンにサイト内容を伝えやすいかも想像につきます。
web フォントとは
CSS3で実装された web フォントはあらかじめサーバー上にアップしたフォントをブラウジングするクライアント側で表示することができます。（正確には web フォントは CSS2以前でも存在していましたが、仕様や互換性の面で実用的ではありませんでした）
フォントフォーマット
Web フォントのフォーマットとしては、 SVG 系などもあるのですが、現状で考えると TrueType ・ OpenType ・ WOFF 、そして IE8など旧ブラウザ用に EOT を考えておけばよいと思います。
WOFF は W3C が Web 標準のひとつとして勧告したもので、 TrueType または OpenType をテーブル単位で圧縮して独自のヘッダ情報や XML 形式のメタデータを付加した形式となっています。 TrueType ・ OpenType から変換することもできます。
Firefox3.6/Chrome6.0/IE9.0以降などの多くのブラウザが対応しており、今後のスタンダードといえそうです。
サイトの更新効率もアップする！？
これまでデザイン的な要素から画像で使っていたものが、テキストで表現できるわけです。このことはユーザービリティだけでなく、サイト更新のスピードにも影響します。
このサイトのメインタイトル部分は手書き風の web フォントを使用していますが、従来ですと、このような表現をしたければ、 Illustrator などを使い、希望のフォントで入力して画像化、それを配置するという作業が必要でした。
このサイトは WordPress で構築しています。記事タイトルが自動的に h1のサイトタイトル部分に挿入するようにテーマ側で指定してありますので、記事を書くだけでこのような表現が実現できるのです。
この一文のようにここはこのフォントを使いたいなんていうことも、簡単に実現できてしまいます。
web フォントの問題点
表示速度
パソコン上にその都度フォントをロードさせるわけですから、その分の負荷はかかってしまいます。欧文の場合は大文字・小文字や記号を含めても 256 文字（最小限なら 26 文字×2）あれば、表現できますが、漢字・ひらがな・カタカナのある日本語では「重い・遅い」というデメリットと向かい合わなくてはなりません、
閲覧者はもちろんのこと、検索エンジンの評価もサイトの表示速度も重要なファクターだといわれていますので、このあたりをうまくコントロールしてあげる必要があるかと思います。
これについてはより軽いフォントフォーマットや必要文字だけのフォントファイルにするサブセット化という手法がありますが、個人的には見出しやタイトル部分に限定するというのが、現時点での実用ラインなのかなとも感じています。
フォントライセンス
web フォントではサーバーにアップしてだれもがダウンロードできる状態になるわけですから、フォントのライセンスというものが関わってきます。
モリサワやフォントワークス、モトヤなど従来のフォントベンダーも有償のサービスとして web フォントに参入してきています。コストを掛けることができるウェブサイトであれば、これらのクオリティの高いフォントを使用できますが、なかなか難しいウェブサイトの方が多いのではと思われます。
一方でフリーフォントの多い欧米と違い日本語の場合はライセンスフリーの書体は非常に少ないです。
なにせ、常用漢字+ひらがな+カタカナですぐに数千文字にはなってしまいますから、手軽に作ることが難しいというのが現状です。
その中でも探してみると無料で使えるライセンスフリーの日本語書体は存在します。
いずれにしても、 web フォントはデザイン・効率・ SEO などさまざまな面でサイト制作者にとっては魅力的な存在であり、十分に実用の域に入ってきているのは間違いなさそうです。
