【備忘録】Webフォントを導入してみた。

最近とんとCSSに疎くなってしまっていて、それとIEのギザギザフォントをどうにかしたいなあ、なんて思っていたところ、今はWebフォントを利用するケースが増えているらしい。

通常パソコンなどでウェブページを表示する場合には、ローカル（個人のパソコン側）にあるフォントを利用する。なので、入っているフォントの種類によって表示結果が異なる。たとえば、WindowsXPだったら基本となるのはMSPゴシックやMSゴシック、明朝などだ。しかし、これらは徐々に見にくいと言う事で変わりつつある。そのひとつがVISTAから搭載されたメイリオと言われるフォントだ。これはこれで見にくいところがあるんだけど、表示がきれいになるため一部システムフォントを除いて切り替えが進んでいる。

で、なんでWebフォントかというと、こういった環境の違いによって表示結果が異なることによってなんとなく気に入らないと言うこともあるわけ。正直、うちのサイトなんてブログ形式でほとんど文字ばっかりでデザイン？なにそれ？なのでやる意味があるとは思えない。

でもまあ、この辺は自己満足なところもあるのでやってみたいと思った。やり方はこのページを参考にさせて頂きました。

そもそも、なんでこれを考えたかというと、テーマとして使っているTwenty FifteenのCSSファイルを覗いていたところ、フォントの指定にNoto Sansと書かれているのに気がついた。なんだこのフォント？というところが話の発端。

このNoto Sansというフォントは2014年7月にGoogleが公開したフリーフォントで、埋め込みや再配布などを許可した見やすいフォント。何でも、現在ではこの1つのフォントで90カ国語まではカバーできるんだそうで、ちょっと面白そうなんで使ってみるか、となった。詳細は窓の杜にあるこのサイトを見て貰った方が早い。

で、Webフォントとしても利用出来るので、こいつをサイトに埋め込んで最初にアクセスしたときにはちょっと時間が掛かるが（ちょっと処じゃない気もしたけど）その後はキャッシュのクリアをするまでフォントが有効になるので、試してみようというのが今回の試み。

指定は簡単で、CSSファイルに

@font-face {
font-family:【フォント集合名】;
src:【フォントへの参照】 [ ,【フォントへの参照】… ];

こんなのを入れ込むだけ。あとは、個別にフォントの指定（font-family)にフォント集合名を指定してあげればOK。今回は、すでにNoto Sansってのが入ってたので、それをフォント集合名にすれば変更は最小限で済む。

初回アクセス時になにやら時間が掛かるのはそういう物だとあきらめた。