先日、なかなかしっくりこなかったサイトタイトルを変更し、ドメイン名に合わせることにしました。
あらためてサイトタイトルが英文字のみになったことから、興味のあったWEBフォントを使ってみることにしました。
WEBフォントとは？
そもそもWEBフォントって？という方のために、一応説明しておきますと
Webページの見栄えを記述するCSS(Cascading Style Sheet)のバージョン3.0で新たに導入された仕様で、ページ中のテキスト(文字)の表示に利用するフォント(書体)データを指定した場所からダウンロードして適用できるようにするもの。
これまでもフォントの指定は可能だったが、Webページを閲覧しているコンピュータに指定したフォントが存在しない場合には、そのフォントでの表示はできなかった。Webフォントを利用すると、フォントが存在しない場合にWeb上の指定されたアドレスからフォントデータを自動的に読み込んで表示に使用することができる。
IT用語辞典 e-Wordsより
と、辞書の説明はどうも堅苦しくなりますが、たとえば、WindowsとMacのPCでは、もともと用意されているフォントが違うため、ものによっては、自分が思っているものとは違ったフォントで他人は見ていたりするわけです。
WEBフォントを使うと、インターネット上で公開されているフォントを利用することになるので、どのPCからでも同じように見えるというメリットがあるのです。
(本当はもっとあるけど、ここでは私の導入したモチベーションだけ紹介)
WEBフォントの導入方法
WEBフォントを導入するにあたり、大きく二つの方法があります。
一つは、自分のサーバーにフォントをインストールして、読み込む方法。この場合、フォントファイルを入手する必要があり、ライセンスフリーで利用できるものは限られてきます。
今回採用したのはGoogleが公開しているWEBフォントを読み込んできて、表示させることにしました。
こちらからWebフォントを利用できます。
既に500種類以上用意されており、どれを選ぶか迷ってしまいますね。。
実際にプレビューで見れるものと、自分のサイトに表示させて見えるものとでは、若干違って見えます。（WEBフォントなのに何故？とつっこみたいところです。）
導入方法はいたって簡単で、ガイドの通りなのですが、英文はちょっとという方は、こちらで親切に説明されていますので、ご参考にどうぞ。
TwentyElevenへの設置
さて、方法は以上の通りですが、実際にカスタマイズの難しいWordpressのTwentyElevenのテーマでどこに設定するかについて、今回はサイトタイトルのみなので比較的簡単です。
このサイトで採用したMerriweatherというWEBフォントを事例に説明します。(後述しますが、2013年1月4日現在、別のフォントに変更してあります。)
Style.css内で
@import url(http://fonts.googleapis.com/css?family=Merriweather);
を最上段に追加。（上記はこのサイトで採用したWEBフォントなので、Googleサイトからお好みで選んでください。）
そして、以下のように#site-title a にfont-familyを追加。
（サイトタイトルにリンク効かせてなかったら当然#site-titleに追加ですね。※TwentyTwelveの場合は.site-header h1）
/* =Header
----------------------------------------------- */
#branding {
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
#site-title {
margin-right: 270px;
padding: 3.65625em 0 0;
}
#site-title a {
font-family: 'Merriweather', serif; /* 追加 */
color: #111;
font-size: 40px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
以上で、とりあえずTwentyElevenのサイトタイトルにGoogle Webフォントを適用できます。
ちなみに@importで複数読み込んでこれるので、別の場所には他のスタイルを適用することも可能です。
（このサイトの場合、WidgetのタイトルにDroid Sansを使用してます。）
後記（2013年1月4日）
※いろいろと模索した結果、現在ではサイトタイトルのフォントは抜群に格好良かったRufinaを使用しています。
[ad]