ブログのフォントにこだわってみる

完全Macの生活に変わって丸２年くらい経ちます。以前は仕事でWindowsを使用しており、Office文書を作成していたのでどうしても完全Macの生活に移れませんでした。
今は、文書作成の必要はあってもファイルで他所とやりとりをする必要がないため、iWorkのアプリを使って文書作成をしています。
さて、完全Mac生活に慣れてしまうとWindowsのあることが気になって仕方ありません。
それは、、、、フォントの汚さです。もちろんWindows Vista以降メイリオなど奇麗なフォントが出て来ていますが、やはりMacのヒラギノフォントなどにはかなわない気がします。僕のMacBook Proは２０１１年モデルのためRetinaディスプレイではありませんが、きっとRetinaディスプレイのMacBook Proは奇麗なんだろうなぁと思います。
ブログも折角だから奇麗なフォントで見えるといいなと思い、Wordpressで奇麗なフォントで表示されるように子テーマを作ってみました。
Webourgeonさんのブログでは、style.cssにて親テーマのCSSを読み込んでから上書きしていく古典的方法ではなく、wp_enqueue_styleを使った方がよいと書かれていますが（記事参照）、今回は古典的方法で子テーマを作成しました。
[css highlight="3,8"]
@charset "utf-8";
/*
Theme Name: TwentyTwelve akahaba custom
Theme URI: http://akahaba.mond.jp/akahaba/
Description: Child theme for the Twenty Twelve theme for WordPress
Author: akahaba
Author URI: http://akahaba.mond.jp/akahaba/about/
Template: twentytwelve
Version: 0.1.0
*/
@import url('../twentytwelve/style.css');
[/css]
これがWordpressの子テーマであることを認識するために、上記のような情報を書く必要があります。必須の情報は3行目のTheme Nameと８行目のTemplateのみです。それ以外は出来たら書きましょうという情報です。
子テーマを格納するフォルダは親テーマと同じ階層にしましょう。
さて、実際に上書きするcss設定を書きましょう。今回はbodyのフォント設定なので下記のような情報を設定しました。
[css]
body {
font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
}
body.custom-font-enabled {
font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック","Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}[/css]
これでWindows環境であればメイリオが、Macならヒラギノゴシックで優先的に表示されるようになります。
Macでの違いは以下のとおり
フォント指定前

フォント指定後

ちょっと違い分かりづらいですかね　^ ^;;