日本語Webフォントの使い方とリスク

Google Fontsやフォントベンダーによって、日本語のWebフォントが簡単に利用できるようになりました。その使い方や注意点などまとめてみます。

Webフォントを使う理由

これまでサイトでの文字情報は、テキストと画像のいずれかで表現してきました。それぞれ下記のようなメリットデメリットがあります。

これらを踏まえ一般的には「できるだけテキストを使い、デザイン的に厳しい場合に画像を使う」という使い分けをしてきました。
そこへ新たに「Webフォント」という選択肢が追加されます。

利用されるようになった背景としては、モバイルの普及が大きいと思います。
閲覧環境のサイズ感が様々になり、画像による文字表現に限界が出てきました。ただそれをテキストに置き換えるだけではクオリティを保てないため、Webフォントという選択肢を考えるようになったのだと思います。ですがこれはフォントが軽い英語圏での文脈。文字数が多い日本語には当てはまりません。

Webフォントの仕組み

そもそもウェブサイトにフォントは含まれていません。
文章などの「テキスト」と「このフォントを使ってください」という指定が書かれているだけです。もし指定されたフォントが閲覧者のパソコンやスマホの中になければ、意図通りに表示されないというのがウェブサイトの基本的な仕様です（参考: 標準フォントを指定する）。

それに対しWebフォントは、フォントデータそのものを一緒にダウンロードさせるという追加機能です。そのためトラブルさえなければ指定したフォントが必ず表示されるようになります。

このフォントデータには「A」や「あ」から始まる文字がほぼ全て含まれています。そのため、英語の場合は文字数も少なく容量的な問題はありませんが、日本語は漢字が多く極端に重くなってしまいます。
具体的な例として4MB程度の日本語フォントが必要になる場合があります。これは仮に大きな画像が400KBとするとその10枚分になります。モバイルの通信環境にもかなりの負担です。

フォントデータが重い場合に困るのは、読み込みに時間がかかるというだけでなく、フォントがダウンロードし終わるまでの一瞬（最悪は数秒）、代替フォントが表示されてしまう点です。初めて訪れたサイトではあまりよい印象ではありません。

これらの問題について対処法はいくつかありますが、構造的な問題でもありどこかで妥協が必要になると思います。

Webフォントの利用方法

A. 所有するサーバに置く

画像などと同様に、フォントデータは自らのサーバに設置可能です。
この場合、フォントを配信する立場になるため権利面も解決しなくてはいけません。またサーバの転送量や負荷の問題もあり自ら対応することになります。
記号などの自作フォントや各サービスにない英語・カナフォントを利用する場合はこの形になると思います。

B. フォントベンダーのサービス

ベンダーによるサービスは、コストに応じページビュー(PV)での制限がかかります。アクセス解析結果を確認して必要なプランを選んでください。

またベンダーとレンタルサーバが提携し、サーバの利用者が無料で使える場合もあります。下記はいずれもモリサワのTypeSquareを利用しているようです。

このサイトが利用している「wpX」のサービスとAdobe「Typekit」を試してみましたが、どちらも賢い仕組みのようです。おそらくページで使われている文字だけのフォントを動的に作り出し、データを軽くしています。コスト（PV）の問題はありますが、重さの面は解決できそうです。

ただこうした仕組みは各ページで個別のフォントデータを作り出していることになるため、大規模なサイトでは非効率と感じる面もあります。またJavaScriptによる動作のため既存サイトでは処理がぶつかる可能性もありそうです。採用する際は動作チェックも必要です。

C. Google Fonts

「Google Fonts 日本語フォント」はまだ試験的に提供されているものですが、利用しているサイトも多くあります。コストもかからずサーバ負荷についても心配はいりません。モリサワなどが作るフォントはありませんが、とてもきれいなフォントが揃っています。

仕組みとしては、一度大きなフォントデータをダウンロードし、その後はダウンロードしたデータ（キャッシュ）を使って各ページを表示するという形になります。そのため最初の一度だけフォントの重さを意識することになります。

このサービスには特別なメリットもあります。
閲覧者が過去に「他のサイト」で同じ日本語フォントをダウンロードしている場合、同じフォントを新たにダウンロードする必要がありません。Google Fontsを利用するサイトが増えれば増えるほど、利用者もフォントの重さを意識する機会が減っていきます。試験中ではありますが、Googleのように誰もが使え、かつ安定した場所にフォントが置かれていることによるメリットです。

利用に適したケースとおすすめのフォント

A. 標準フォントに不満がある場合

日本語Webフォントが必要と思わせる背景として、Windowsの文字表現があまり綺麗ではないことや、一部のAndroid端末でフォントの種類がかなり制限されていることなどがあります。
文章が特に重要なサイトでは、読みやすさやクオリティを底上げするという意味でWebフォントは利用価値があります。

ただMacやiOSの場合、標準フォントがもともと綺麗なので他の環境のために不要なデータをダウンロードするということになります。環境によって分岐処理をするなども考えた方が良いかもしれません。

また標準フォントという前提では最低でも２つのウェイト（通常と太字）が必要になります。太字というのは単に通常の文字を太くしている訳ではなく文字の形自体が異なります。そのため全く別のフォントを二種類読み込むことと同じです。ウェイトについてもデザイン時点から慎重な検討が必要です。

B. 装飾として利用する場合

これまで画像化していた見出しやバナーをWebフォントに置き換えるというものです。ただそうした部分的な利用のために重いフォントデータを読み込ませるというのはやはり検討の余地があります。見栄えだけの問題であれば、容量の軽い英語やカナだけのフォントを活用できないか検討してみてください。

またWebフォントも文字間や配置などが難しくデザイン的に万能という訳ではありません。サイトのクオリティを決定するようなパーツには難しい場合もあります。

C. 明朝体を使いたい

Windowsの標準フォントに実用的な明朝体がなかったり、Androidにそもそも明朝体がない場合もあるため、どうしても明朝体が必要な場合はWebフォントを利用することになります。旅館や和食料理店のサイトなどではやはり効果的だと思います。

---

もし上記のように明確な意図がない場合、日本語Webフォントはデメリットの方が大きいかもしれません。採用については実際にテストしながら慎重に検討された方が良いと思います。