Webフォントの導入を検討してみた結果報告。（各OS、各ブラウザ、各画面解像度でのフォントの見え方画面サンプル有り）

Webフォントの導入を検討するため、7月6日の一日限定でひとぅブログでWebフォントの表示テストをしました。今回はその結果検証をしたいと思います。回線は光またはLTEです。

各機種での画面比較

各機種で表示テストを実施しました。文字フォントは「ゴシックMB101 R」です。画面がどのように表示されているか？リアル画像はFlickrでオリジナルサイズをご確認をお願いします。

MacBook Air（解像度：1366 x 768ピクセル）

左：Safari、右：Chrome

Macは標準フォントがきれいで、解像度がRetinaでなくてもアンチエイリアスがきれいに効いてきれいに表示されます。

書籍物でも多く利用されている「ゴシックMB101 R」はさすがにきれい、落ち着いた表示になります。「読もう」という気持ちになりますね。表示速度は、Webフォント無しより0.5秒ほど遅くなった印象です。全体表示後にフォントが切り替わる様子ははっきりと確認できます。やはりこのチラつきがイラッとしますね。

iPad mini Retina （解像度：2048 x 1536ピクセル）

左：Safari（全体表示）、右：Safari（本文拡大表示）

左：Chrome（全体表示）、右：Chrome（本文拡大表示）

Retinaディスプレイはさすがにきれいです。Macと同様、標準フォントでも鮮やかなフォントで気持ちがいいですが、「ゴシックMB101 R」ではさらに説得力が増すように感じました。

ただ、読み込み速度の遅延とフォントの切り替えが気になりました。

iPhone 5s （解像度：1136 x 640ピクセル）

左：Safari、右：Chrome

iPhoneでもMac、iPadと同様の印象です。スマートフォン用の画面設計のため、適切な読みやすい大きさに表示され、とても読みやすいです。読み込み時の画面のチラつきさえ無ければ完璧なんですが……。

Android （解像度：1280 x 720ピクセル）

左：標準ブラウザ、中央：Opera、右、Opera（ヘッダ部分）

解像度が低めの機種ですが、スマホなので特に画面に違和感はありません。iPhone 5sに近い印象です。Androidの文字フォントが丸ゴシック固定の機種がありますが、「ゴシックMB101 R」はさすがにきれい……と感動しちゃいます。

Androidの問題では無いかもしれませんが、Operaの場合、タイトルの文字が切れる現象が。再調整が必要になりそうです。（これは面倒。）

Android （解像度：1920 x 1200ピクセル）

左：Chrome（全体表示）、右：Chrome（本文拡大表示）

高解像度の機種では本文を拡大表示するとかなりきれいです。Androidの丸ゴシックでないのがGoodです。読み込みの遅延、画面のチラつきはやはりあります。

Windows 8.1（解像度：1920 x 1080ピクセル）

左：Internet Explorer、中央：Chrome、右：Firefox

高解像度のWindows タブレットです。本文のみ拡大表示しています。標準フォントよりきれいで読みやすくなりましたが、残念ながらiPadほどの表示力はありません。

Windows 7（解像度：1366 x 768ピクセル）

左：Internet Explorer、右：Chrome

最後に一般的なノートパソコンの解像度のWindowsパソコンです。結果は上の画面の通り。ほんと残念でなりません。アンチエイリアスがまったく効いていません。

いちばん最初のMacBook Airと同じ解像度なんですが、この再現度の差はいったい……。Windowsって何でこんなに残念なのでしょうか。

まとめ

Webフォントを使うといい点

• 自分な好きなフォントを表示できる
• Apple製品、Android、Windows高解像度の機種ではきれいに再現される
• Androidの丸ゴシックからおさらばできる

Webフォントを使うといまいちな点

• ページの読み速度が長くなる
• 通信量が増える
• フォント切り替え時に画面のチラつきがある
• Windowsの低解像度機種では残念な表示結果になる
• 維持費がかかる

Webフォントの導入を検討した一番の理由は、Windowsでもきれいなフォントで表示させたいから、でした。しかし結果は上の通り、Windowsの画面解像度の低い機種では、本文ほどの文字の大きさではきれいにフォントを再現できないようです。

アンチエイリアスが効かずビットマップフォントのように残念な表示になってしまいました。記事タイトルや大きなロゴなどの大きなサイズ（たとえば25ポイント以上）には効果があるようですが、本文くらいのサイズで利用したかったのです。残念。

総合的に考えると読み込み速度や通信量が増えること、さらに読み込み完了時にフォント切り替えのためチラつくことを考えると、今回はWebフォントの採用は見送りとすることにしました。

ご意見やアドバイスをいただきましたみなさま、この場を借りてお礼を申し上げます。

フォントの切り替えが必要ない方式もあるようですが、現段階では採用は難しそうなので今回は見送ります。前々から気になっていたことをじっくり検証できたのはある意味いい経験だったと思います。

今回の実験結果がブログやウェブサイトでWebフォントの導入を検討されている方の参考になれば幸いです！。