実験keiji先日、なかなかしっくりこなかったサイトタイトルを変更し、ドメイン名に合わせることにしました。サイトタイトルが英文字のみになったことから、興味のあったWEBフォントを使ってみることにしました。Sheet)のバージョン3.0で新たに導入された仕様で、ページ中のテキスト(文字)の表示に利用するフォント(書体)データを指定した場所からダウンロードして適用できるようにするもの。これまでもフォントの指定は可能だったが、Webページを閲覧しているコンピュータに指定したフォントが存在しない場合には、そのフォントでの表示はできなかった。Webフォントを利用すると、フォントが存在しない場合にWeb上の指定されたアドレスからフォントデータを自動的に読み込んで表示に使用することができる。e-Wordsよりと、辞書の説明はどうも堅苦しくなりますが、たとえば、WindowsとMacのPCでは、もともと用意されているフォントが違うため、ものによっては、自分が思っているものとは違ったフォントで他人は見ていたりするわけです。WEBフォントを使うと、インターネット上で公開されているフォントを利用することになるので、どのPCからでも同じように見えるというメリットがあるのです。(本当はもっとあるけど、ここでは私の導入したモチベーションだけ紹介)WEBフォントの導入方法WEBフォントを導入するにあたり、大きく二つの方法があります。一つは、自分のサーバーにフォントをインストールして、読み込む方法。この場合、フォントファイルを入手する必要があり、ライセンスフリーで利用できるものは限られてきます。今回採用したのはGoogleが公開しているWEBフォントを読み込んできて、表示させることにしました。こちらからWebフォントを利用できます。500種類以上用意されており、どれを選ぶか迷ってしまいますね。実際にプレビューで見れるものと、自分のサイトに表示させて見えるものとでは、若干違って見えます。(WEBフォントなのに何故?とつっこみたいところです。)導入方法はいたって簡単で、ガイドの通りなのですが、英文はちょっとという方は、こちらで親切に説明されていますので、ご参考にどうぞ。TwentyElevenへの設置さて、方法は以上の通りですが、実際にカスタマイズの難しいWordpressのTwentyElevenのテーマでどこに設定するかについて、今回はサイトタイトルのみなので比較的簡単です。このサイトで採用したMerriweatherというWEBフォントを事例に説明します。(後述しますが、2013年1月4日現在、別のフォントに変更してあります。url(http://fonts.googleapis.com/css?family=Merriweather);を最上段に追加。(上記はこのサイトで採用したWEBフォントなので、Googleサイトからお好みで選んでください。font-familyを追加。(サイトタイトルにリンク効かせてなかったら当然#site-titleに追加ですね。Webフォントを適用できます。ちなみに@importで複数読み込んでこれるので、別の場所には他のスタイルを適用することも可能です。Sansを使用してます。)後記(2013年1月4日)※いろいろと模索した結果、現在ではサイトタイトルのフォントは抜群に格好良かったRufinaを使用しています。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。meAuthor:Keijiキリスト教福音宣教会で執事を9年ほどやっています。く手がけていますが、普段は3人の娘に目を細める育メンです。