最近、Webサイトを表示したときに「ちょっとフォントが普通と違うな」と思うサイトが増えてきました。いわゆる「Web フォント」いうやつで、日本語フォントではまだ多くありませんが、海外のサイトでは普通に使われるようになってきています。
その Web フォントの中でも、誰でもすぐに使えるものとしては Google が公開している "Google Fonts" というサービスが有名です。
そこでこのはてなブログをカスタマイズしようと、Google Fonts で色々なフォントを探してみた中で、これは読みやすい！と思ったのが、"Cantarell" というフォントです。今このブログの英数字の表示に使っているのがこのフォントです。
普通のフォントとどこがどう違うのか、Windows の標準的なフォントと比較すると次のような感じです。
一番左は Windows の標準的な Sans-serif フォントの "Arial" 、真ん中はMicrosoftが可読性に優れた画面表示用フォントとして開発し、Windows 2000以降(英語版)の標準フォントや「メイリオ」の欧文のベースにもなった "Verdana"、そして一番右が Cantarell です。
Cantarell を拡大するとこんな感じ。
Cantarell も、Verdanaと同じように特に携帯端末の画面表示での可読性を考慮して作られたフォントのようで、説明書きにも、
The typeface is designed as a contemporary Humanist sans serif, and was developed for on-screen reading; in particular, reading web pages on an HTC Dream mobile phone.
とあるように、ぱっと見、文字一つ一つがくっつきすぎず、特に "S" や "G" のカーブなどが閉じすぎずに開いた感じで、"p, d, g" などがまるすぎず、クールな印象です。気に入りました。
はてなブログに Google Fonts を適用するには
Google Fonts の場合、簡単なコードとCSSを追加するだけで、すぐに使うことができます。
1.フォントを選ぶ
- Google Fonts で使いたいフォントを探し、"Add to Collection" をクリックして画面下部の "Collection" に追加していきます。
2.リンク用コードを取得
- 画面下部の "Collection" に追加し終わったら、"Use" ボタンをクリックすると、"3. Add this code to your website:" という所に、
<link href='http://fonts.googleapis.com/css?family=Oxygen+Mono|Cantarell:700,400,400italic,700italic|Gruppo' rel='stylesheet' type='text/css'>
- といったコードが生成されます。このブログでは、ブログタイトルに "Gruppo", 等幅部に "Oxygen Mono" も使用しているので、"|" で区切られて複数のフォントを読み込むコードになっています。
3.はてなブログへリンクコードを設置
- このコードをコピーして、はてなブログ管理画面 ＞ デザイン ＞ ヘッダ下 に貼付けます。
4.CSSで適用したい箇所に指定
- あとは、はてなブログ管理画面 ＞ デザイン ＞ デザインCSS に次のように記述しておけば、すぐに全ページに反映されるでしょう。
body { font-family: 'Cantarell', Sans-serif; }
和文Webフォントはまだこれから
このブログでは、各エントリーの見出しなどに実はモリサワ「新ゴ」のWebフォントを使用しています。今年の年末まで無料でお試しできるキャンペーンを利用しているので、年が明けると普通のフォントに戻ってしまうと思います。
今のところ、DTPで親しまれている名だたる和文フォントのWebフォントとしての利用は概ね有料ですが、大手企業やキャンペーンサイトを中心にじわじわと使われ始めているようです。
あるフォントを使いたいがためにテキストを画像化しなくてもよいというのは、制作工数削減だけでなくSEO(機械の可読性向上)の効果も期待できるので、日本のWebデザイン向上のためにも、今後ますます広がって欲しい所です。
