Webフォントが良さそうだったので色々調べてみたら、イイ感じです

他の人と同じような画面って没個性でもったいないですよね、と言いながら同じようなテーマで完全に没個性している @azur256 です。テーマは色々と探しているのですが、まずはちょっと一手間で見た目を変えてみようと思い、Web フォントに手を出してみました。
色々とやることがあるので、全 3 回でお送りします。

今日は、Web フォントとは何か、ということと、Web フォントの選びについて書いてみたいと思います。

Webフォントって何だ？

Webフォントとは簡単に言えば “Webからダウンロードして使うフォント” のこと。一般にコンピュータに文字を表示する時にはコンピュータにインストールされているフォントを使います。ワードプロセッサーやプレゼンアプリでフォントを選ぶ時はコンピュータにインストールされているものから選ぶと思います。

ブログのフォントも一般にはコンピュータにインストールされているフォントを指定して表示させています。こんな呪文を見たことある方もいると思います。この呪文でコンピュータにインストールされているどのフォントを使うかを指定しています。(呪文と言っていますが、正確には CSS の font-family プロパティでの指定です)。

font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;

1	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;

この時にフォントがコンピュータにインストールされていなかったらどうなるでしょう？
代替フォントと呼ばれるもので表示されたりして雰囲気が変わってしまいます。コンピュータにインストールされているフォントというのも、Windows なのか Mac OS なのか Linux なのか、など OS によっても違いもあるので、結構悩ましいものなのです。

このような課題を解決するために、「使うフォントを Web からダウンロードして使えば期待した通りに表示されますよね」という仕組みが Webフォントです。

Webフォントを使うということは

先ほど書いたようにフォントを Web からダウンロードしますので、使いたいフォントを指定しておけば、あとはブラウザが表示する時にダウンロードして、期待通りのフォント表示をしてくれるというわけです。素晴らしい仕組みなのですが、この仕組みは欧米では手軽に使えますが大量の漢字を必要とする日本では大きな課題があります。

1つは大量の文字を作成しなければならないため Web フォント自体がまだまだ少ないこと。そして、もう一つは文字が沢山入っているフォントファイルは非常に大きいのでダウンロードに時間がかかり、ブログの表示が遅くなる可能性がある、ということ。

でもフォントをちょっと変えれば、ブログの印象が大きく変わりますので、今回は性能をなるべく犠牲にしないように Web フォントを試してみようと思います。

まずはフォントを探す

Webフォントはどこかのサーバで提供してくれているものをダウンロードして使うものと、自分のサーバで配信するタイプのものとの2種類があります。

Google Fonts やフォントプラスなどはサーバで提供してくれるものを使う形になります。

一方で無償配布されているフォントなどを自前のサーバに配置して Web フォントとして使うのが後者の方法です。(ライセンスとして許可されているフォントしかこの方法を行うことはできません)。

今回は、色々と試してみたかったので自前のサーバに配置するタイプで試してみたいと思います。
フォントも色々と公開されていますが、有名どころでライセンスをクリアできそうな「フォントな」さんの「やさしさゴシック」を第一候補として調べてみました。

「やさしさゴシック」はひらがなやカタカナをオリジナルで作成され、それ以外をM+ OUTLINE FONTS と合成、さらに M+ Fonts で足りない漢字を IPAexフォント/IPAフォントで公開されている IPA ゴシックで作成されています。

「やさしさゴシック」のライセンスは、M+ Fonts ライセンスと IPA フォントラインセンスに準ずるということなので、Webフォントとして利用するには、それぞれのライセンス条件を満たす必要があります。
M+ Fonts ライセンスは改変も可能ですし再配布も可能ですが無保証というライセンス、IPAフォントライセンスも改変や再配布などは可能ですが、それには条件があるのできちんと条件を満たす必要があります(これを書いている時点のライセンスは IPAフォントライセンスv1.0 です)。

この IPAフォントライセンスの中に再配布を行う場合の条件があるのですが、Web フォントとして自サーバに設置した場合は再配布とみなされる可能性があるので、この条件(IPAフォントライセンス v1.0 第3条)を満たすように対策を行う必要があると考えるのが安全です。

「やさしさゴシック」は TTF 形式で配布されていますが、Web フォントであればそのサイズがより小さくなる WOFF 形式にしたいところです。そこで、TTFファイルと、TTFファイルから変換した WOFF ファイル、それぞれの gz 圧縮ファイルの 4 つのサイズを比較してみました。
WOFF への形式変換は武蔵システムという会社が公開されている WOFFコンバータを使わせていただいて検証しました。

07やさしさゴシック.ttf	4711748 byte
07やさしさゴシック.ttf.gz	2860422 byte
07やさしさゴシック.woff	2851128 byte
07やさしさゴシック.woff.gz	2851943 byte

こうやってみると、WOFF 形式と TTF 形式の gz 圧縮はほとんどサイズが変わらないです。TTF ファイルから WOFF 形式への形式変換は改変になる可能性があり IPA フォントライセンスの改変条件に抵触する可能性があります。

ここまでを読んで、なんだか難しそうだぞ、と思われたと思います。ただ、ライセンスをちゃんとクリアしておくことは使うにあたって必須のことですから、仕方がありません。

私もここまで色々と書いておいてなんですが、IPA フォントの Web フォント化がライセンスをクリアしてできるのか色々悩みました。特に、条件によっては IPA のオリジナルフォントに戻せる手段を提供する必要があるという部分を満たすのが大変だったので IPA フォント、あるいはその派生物を利用するのはあきらめました。

でも、Web フォントは使ってみたかったので改めてフォントを探して、自家製 Rounded M+ という IPA フォントと合成していないフォントを使わせていただくことにしました。良く考えたら、自分のブログで使う漢字(字形、グリフ)は Rounded M+ がサポートしている範囲でほぼ網羅されそうです。

Rounded M+ にはいくつものフォントファイルが含まれていますが、今回は Rounded M+ 1c の Medium を使わせていただくことにしました。 IPA フォントを合成していないのでフォントファイルも小さくなっています。また、ライセンス的に改変が自由になっているので WOFF ファイル形式にすることも可能です。