【備忘録】今現在のfont-family指定の最善解。Androidまで意識するとこうなりました！

ぼんやりしたペースで進めているwordpressの新テーマづくりですが、今回は「フォント」についてのメモ。

当サイトはごくごく普通のブログなので、対象となる視聴環境はPCからタブレット、スマホまで様々。
そんな中でフォントを指定するっていうことで、cssでの記述(font-family)は以下が基本形になります。

[css] font-family:’Lucida Grande’, ‘Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
[/css]

MacのOS Xの標準フォントであるLucida Grande＋ヒラギノ角ゴの合成フォントを再優先に。
そして、Windowsではメイリオが表示されるようにします。
（ここでメイリオより前にArialなどのwindowsにも入っているフォントを入れちゃうとメイリオより優先されてしまうので注意。Lucida GrandeはWindowsの標準フォントではないので大丈夫。）

とまあ、これで今現在のごくごく普通の表示はできるはずです。
一つ問題となるのは、「ヒラギノフォントをインストールしているWindows環境ではメイリオではなくヒラギノで表示されてしまう」という問題。
Windows環境ではなぜかヒラギノがあまりきれいに表示されないので、ちょいと厄介です。

その対策としては、ヒラギノより先にメイリオを指定してあげればいいんですが、そうすると今度はMacにMS Officeを入れている環境だとメイリオが入っているためメイリオが表示されてしまうという問題が。。。

うーん。悩ましい。。。

まあ、ここは完全に好みの問題ですが、僕はヒラギノ優先で行くことに。
なんと言いますか、Macでメイリオが表示されるのは嫌だというだけの話です。

と、ここまではいいんですが…

ここでもネックになるのはAndroid！
そもそもAndroidにはどんなフォントが入ってる？
出したいフォントも出せないこんな世の中に「Webフォント」！！
というわけで、、、

ここでもネックになるのはAndroid！

wordpressを使っている人たちの間でわりと忘れられがちといいますか、捨てられている存在Android。

というのも、wordpressには「WP touch」という超便利プラグインがありまして、コレさえ入れておけばモバイル用のデザインが勝手に作られるのでいろんなサイトで使われているんですが…、
実はこれ、最新のAndroidには対応していません。

WP touchを当てたサイトを最新のAndroidから見ると、ヘッダーがまるまる読み込まれないらしく、cssが当たっていないわviewport設定は死んでるわ、ヒドい状態で表示されてしまいます。

↑こんな感じ

ただこの問題ってあんまり重要視されていないのか、結構有名なブログ（「わかったブログ」さんとか、「delaymania」さんんとか。）でも放置されている問題。
まあ、確かにみんなiPhone使ってるんでしょうけどね。

実際、僕のブログの訪問者のうちAndroidは約22%。しかも「WP touch」でうまく表示されないAndroid 4.1以上の訪問数のなると、さらにそのうちの30%ほど。
つまり全体でみれば7%ほどってことで、まあ無視しちゃてもいいのかな〜という気もします。
（今後ますますAndroidが衰退しそうなニュースも流れ聞こえてきたばかりですし。）

なので、ここからは完全に趣味の世界なんですが、せっかくなのでAndroidも見据えたfont指定をやってみようと思います。

そもそもAndroidにはどんなフォントが入ってる？

というわけで、まずはテストページを作ってみて、表示を確認してみました。
確認したのは、基本形の「Lucida Grande」「Hiragino Kaku Gothic ProN」「ヒラギノ角ゴ ProN W3」「Meiryo」「メイリオ」「sans-serif」。
加えて、わりといろんなサイトで使われている「arial」「Helvetica」。
そして、iOS7で採用されたことで話題のフォント「Helvetica Neue UltraLight」。
さらに、Androidの標準フォントと言われている「Droid Sans」。

で、手持ちのXpria Z(SO-02E)で確認してみると、、、

全滅！！全部メーカー独自仕様の丸ゴシックが出ちゃう！！これはこれでカワイイけど！！！

なんなんでしょう「Droid Sans」すら表示してくれない…。
Android4.0以降には入っていないのか、はたまたメーカー仕様で消えているのか。
無数のバージョン、無数の端末が乱立するAndroid環境でフォントを統一するのはちょっと無理っぽいなぁ…。

と、諦めるのはまだ早い。

出したいフォントも出せないこんな世の中に「Webフォント」！！

そうです。今まで気になっていたけど手を付けていなかった「Webフォント」。
これだったらAndroidもイケるはず！！

というわけで、無料webフォントの超巨大ライブラリー「Google Fonts」と、無料の和文webフォント「M+ web fonts」を試してみました。

Google fontsの場合は外部cssの形で提供されているので、以下のようにcssファイル内でインポートしておけば、
[css] @import url(http://fonts.googleapis.com/css?family=Lato);
[/css] あとは、font-familyで指定してあげるだけ。
[css] font-family:’Lato’;
[/css] （もちろん、htmlファイル内で外部cssをインポートしてもOKです。）

M+ web fontsの場合は、まず@font-face 要素を使ってフォントを定義。
[css] @font-face
{
font-family: mplus-1p-regular;
src: url(‘http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-regular.ttf’)
format(“truetype”);
}
[/css] あとは同じようにfont-familyで指定してあげるだけ。
[css] font-family: mplus-1p-regular;
[/css]

どちらもなかなかお手軽に使えます。

で、表示の方はと言いますと、こちらもテストページを作ってみると、、、

表示はカンペキ！でも和文の表示が遅すぎる！！！
さすがにちょっと、このスピードは実用向きじゃないかも。。。

やはり和文フォントはファイルサイズが大きすぎるんでしょう。
もちろんフォントファイルはキャッシュされるので、ページ遷移の度に遅延が起こるわけではないんですが、さすがにちょっとな〜。
有料の和文webフォントなんかだと必要な文字だけをサブセットにして転送することでファイルサイズを大幅に減らす技術が使われていたりするようですが、、、うーん、有料か。。。