【コラム】Webフォントを使ってみました

見出しやキャッチコピーなど、美しく目立たせたい文字には、テキストではなく画像で表示するのが主流でしたが、ディスプレイの多様化、高性能化が進んでくると、画像でのテキストを表示することが不便に感じられることもしばしば。

そこで、注目が集まっているのがWebフォント。
Webフォントってどうなの?って思っている方、注目です。

Webフォントのメリット

・テキストなので、画像ソフトを使う必要がなく、修正や作成が容易
・ユーザーの環境に依存することなく、デザイン性の高いフォントが使える
・ジャギーが出にくい鮮明なテキスト
・CSSの修正で、表示するフォントを簡単に変更できる
・テキストなので、画像にaltで設定するよりも、検索エンジンが読みやすい(SEOで有利)
・画面サイズに合わせて表示内容を最適化するレスポンシブウェブデザインにも柔軟に対応できる
・音声読み上げなどWebアクセシビリティを配慮した設計が可能
など

こう書くと、いいことずくめですね。

では、どのような場面で使えるのか見ていきましょう。

アイコンフォント

お勧めは、Font Awesome
グローバルナビやメニューなどで使えるアイコンが豊富にそろっています。
ファンタネットのホームボタンは、こちらのアイコンを利用しています。

使い方は、こちらのサイトを参考にさせて頂きました。

楽して便利!Webアイコンフォント『Font Awesome』の使い方と活用

アルファベットのWebフォント

アルファベットのWebフォントは、無料で使えるものがほとんどです。
その中でも安心して継続利用できそうな、Google Fontsがお勧めです。

まずはこちらから、使いたいフォントを探します。

gfont1

一通り目を通します。

gfont2

使いたいフォントが見つかったら、[Quick-use]ボタンを押して、タグとCSSに指定されたコードを追加すれば完了。

gfont3

こちらのサイトの見出しアルファベットに使いました。

日本語ウェブフォント

美しい日本語フォントをウェブで美しく表示できれば、こんなに嬉しいことはありません。

試したのは、モリサワTypeSquare
モリサワのフォント各種が、PV、ドメイン数、利用書体数に応じて比較的安価で利用可能です。

ご利用申し込みをし、ドメイン数1、利用可能書体数1の無料プランでテスト。

使い方は、Google Fontsと同様、タグとCSSにコードを追加するだけ。

使った感想は、以下の通り。
・予想以上に表示に時間がかかる
・デバイスフォントからWebフォントに切り替わる時に違和感がある

ウェブフォントが読み込まれるまで、デバイスフォントが表示されるのですが、1秒ほど表示されてからいきなり切り替わるので、かなりの違和感がありました。
よって、日本語Webフォントについては、利用を見送ることにします。

この問題は、フェードイン表示させることにより、あまり気にならなくなりました。
Webフォントが適用されるまでに、ブラウザのデフォルトフォントで表示される現象を解決できますか?

感想

英数字と記号は使う価値ありです!
表示も美しく、スムーズ。
魅力的なフォントが揃っています。

しかし、日本語Webフォントは小さいサイズのフォントの美しさが満足できる域に達していないなど、まだ成熟していないように思われます。
PV、ドメイン数、利用可能書体数に応じて課金されるので、長期的な利用料が読みにくいという難点もあります。

今後の展開(希望的観測)

ディスプレイの高性能化により、デバイスフォントでも美しい表示が可能になってきています。
将来的に、各種デバイスで共通してインストールされているフォントが普及すれば、Webフォントがなくてもいいのかなとも思います。
もしくは、日本語Webフォントの軽量化、課金に対する不安感が解決できれば、今以上に普及するのではないでしょうか。
今後に期待します!

Previous post【コラム】Googleからペナルティを受けないために