読者です 読者をやめる 読者になる 読者になる

気軽に始められるWebFont

サイト構築 CMS フォント

少し前に、Adobe TypekitのWebフォントサービスが日本語、中国語、韓国語フォントに対応したというニュースがあった。

blog.typekit.com

 

もともとWebページにおいて文字の書体は、「見る側の環境」によって左右されるものだ。blogの見出しや本文が明朝体で表示されるか、ゴシック体で表示されるかサイトを公開する側では完全にはコントロール出来ない。もちろんフォントを指定することは可能だけど、見る側がそのフォントを持っていなければサイトを作った側が意図したような書体で表示される保証はない。この状況を打開するのがWebフォントである。要するにサーバー側にフォントを用意して、見る側がページを開いた時にフォントをダウンロードし、そのダウンロードしたフォントでページを表示するわけだ。20世紀には回線の遅さから無理があった方法だが、今では十分実用的だ、ただし欧米フォントに限ってはの話である。

 

せいぜい256文字以下で済むアルファベット圏のフォントは、一瞬でダウンロードできるのだが、漢字圏のフォントはちときつい。文字少なめのものでも数MBはあるわけで、日本語Webフォントを使用しているサイトでは、どうしてもページの枠とかの要素が先に表示されてから、1秒から数秒開いて文字が表示されるなんてことになりがちだ。まあ、数MBを数秒でダウンロードできるようになったのだから、現代の回線速度が20世紀のそれに比べていかに速くなったかは言うまでもないのだが、それでもなんか「うーん」って待つ重さがあるのだ。そこで、「実際にサイトで使用している文字だけ集めたサブセットのWebフォントを作ってそれを使おうぜ」ということになる。常用漢字が2000文字くらい、UNICODEのCJK統合漢字が2万文字くらいあるが、実際に特定のWebサイトで使われる文字となるとそんなに多くない。「実際に使ってる文字だけ」ならダウンロードにかかる時間はかなり少なくて済むのだ。実際日記系blogなら数百文字程度で済むのではないか。

 

しかし、これを実現するためには、Webサイトに新たな文書が追加されるたびに文字をサーチして今まで使われてなかった文字があったら追加するような仕組みが必要になる。これを行ってくれるサービスはいくつかあるのだが、今回Adobeがそういう方法で日本語フォントに対応したというのはなかなか楽しいことなのだ。

 

Adobe Typekitには無料プランがある。これで使える日本語フォントは現在のところ、源ノ角ゴシック、平成角ゴシック、平成丸ゴシック、平成明朝stdの四書体である。英文フォントを含めると800書体使えるが、まあ、日本のサイトで日本語フォント以外を使うのは例外的な装飾的使用にとどまると思う。

無料プランが使えるのは、月間25000ページビューまで、ひとつのWebサイト、二個のフォントファミリーまでに限定されているが、まあ、アフィリで大儲けするようなサイトでなければおおむね含まれるのではないだろうか。

 

もっとも簡単な使い方は、Adobe Typekitのページで使用するフォントを選び、適用するセレクタを入力し、公開ボタンをクリック。そしてWebサイトのヘッダ内に二行のJavaScriptを貼り付けるだけだ。セレクタに bodyとかけばサイト全体のフォントがそれになるし、見出しのフォントを変えたければh1 h2 h3などをセレクタに追加すればいい。設定後だいたい数分以内にサイトに反映される。

f:id:juangotoh:20150623044857j:plain

h1~h5を平成丸ゴシックに、bodyを源ノ角ゴシックにした例