Webフォントを使ってみて、まだいろいろ情報が少なかったので、まとめてみました。
※ 私は、FONTPLUSさんの「スマートライセンス」を使わせていただいてます。
Webフォントってなに？
webフォントとは、CSS3から使えるようになった、Web上からフォントをダウンロードし、ブラウザで表示する技術のことです。
なので、ローカルの環境に依存することなく、そのフォントで表示することができます。
今までのフォント指定
今までは、cssで指定し、PCにインストールされているものをブラウザで表示していました。
しかし、フォントはOSやバージョンにより標準でインストールされているものが違います。
なので、多彩なフォントをcssで指定しても、みる人のPCに入っていなければ、表示することはできません。
そのため、なるべく標準でインストールされているものを選び、以下のように、左から順に、なかったら次のフォントを表示するように、いくつか書くのです。
font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
何がいいの？
1.楽(らく)
PCごとに、表示されるフォントが違えば、サイトの雰囲気やデザインまでもが変わってしまいます。
なので、見出しなどの部分は、画像で表示したりします。
もう、画像を作らなくていい！！
画像で表示する場合、変更があったり、増えたりする度に、画像を作らなければならなかったが、Webフォントで表示すれば、テキストを変えるだけで良くなります。
2.拡大してもジャギらない
見出しなどを画像で表示した場合、拡大するとジャギーが目立ってしまう。
PCでは、表示サイズと同じサイズの画像を用意すれば、そこまで気にすることはなかったが、Retinaディスプレイが現れ、スマホが普及してきた今、拡大されることが多くなってきた。
しかし、Webフォントを使えば、この心配はすることなく、拡大してもきれいに表示されます。
3.データが軽い
1のように、画像が減るため、データは軽くなります。
4.文字として表示される
1のように、テキストで表示されるため、テキストのコピーや検索、読み上げ機能や翻訳機能に対応します。
また、SEO対策にも有利です。
5.スマホにも対応
iOSは共通だが、Androidはメーカーによってインストールされているフォントは様々なので、フォント指定を全てに対応させるのとても大変です。
私も、スマホはあきらめることが多かったです。しかし、Webフォントを使えば、
スマホも対応！！
私は、これが1番嬉しいかも。スマホにも世界観が(´；ω；`)
レスポンシブであったりしても、テキストなので、折り返してくれます。
このような細かい部分も考えなくて良くなるので、本当に快適です。
できないこと・デメリット
1.ページの読み込みに時間がかかる
数秒というか、コンマ何秒なのですが、サーバやキャッシュの状態によっては、"遅い"と感じるくらいの時間がかかることもあります。
また、外部のサーバを使っている場合には、フォントの読み込みだけが異様に時間がかかるタイミングがあったりします。
※ サービスによっては、軽減するための方法はあります。
これからの改善に期待です！
2.一瞬標準フォントが表示される
Webフォントを読み込んでいる時間は標準のフォントが表示され、Webフォントの読み込みが完了すると、Webフォントに変換されます。
※ サービスによっては、対処するための方法はあります。(jsで頑張る方法もあります。)
※ しかし、Webフォントの読み込みが完了するまで文字が表示されない設定であったりすると、読み込み時間がかかっているように感じやすくなってしまいます。
3.動的な表示はできない
例えば、静的な状態はフォントA、クリックしたらフォントBになる、という操作。
※ サービスによっては、対処方法はあるが、再読み込みがかかる場合、一瞬消えて表示される等の挙動もある。
(個人的には、この仕様にならないようにデザインするのが良いと思う。)
知らない人もいるみたいなので書いておくと、
- フォントの種類によって、太字(bold)指定ができるものとできないものがある。
- フォントファミリーが分かれていて、cssで指定を変えれば表示できるものもある。
ので注意。
4.Windows環境ではフォント表示が乱れることがある
もともと標準フォントでも乱れることはあるみたいなのですが、XPで特に起きるそうです。
ただし、IE7,8あたりでは、比較的きれいなのだとか。
5.日本語フォントが少ない
こちらは、Webフォントに限ったことではありませんが、日本語は、ひらがなカタカナ漢字…と、文字数が膨大なため、欧文フォントに比べるととても少ないです。
私は、充実している有料サービスのものを使用していますが、無料フォントの場合は、ライセンスをしっかり確認しましょう。
Webフォントに使う場合は、再配布にあたります。(cssにファイルまでのパスを記述するので)
まとめ
デメリットはありますが、それを考慮した上でサイトを構築すれば、特に問題はないのではないかと思います。
メリットの方がとても大きく、良いことづくしだと考えています。
デザインの幅が広がります！！
私が携わったサイトは好評価をいただいているので、嬉しいです♪