Webフォントとは？
通常のフォント（デバイスフォント）はデバイスごと（Windows、Mac、iPhone、Androidなど）にインストールされているフォントしか表示出来ませんが、例えば、
- Windowsでヒラギノは購入しないと表示不可
- Androidは明朝体が表示不可
など、実務でもよく使うヒラギノや明朝体にはこのような問題があります。
しかし、Webフォントはデバイスに左右されず全て同じように表示することが出来ます。
つまりデバイスフォントとWebフォントの違いは以下になります。
デバイスフォント
デバイスにインストールされているフォント。
表示されるフォントはデバイスによって決まる。
Webフォント
サーバ上に置かれていたり、インターネット上で配布されているフォント。
表示されるフォントはデバイスに影響されず全て同じように表示される。
Webフォントのメリット
先ほどの説明と重なる項目もありますが、Webフォントのメリットについては以下になります。
- どのデバイスでも同じように表示される
- 個性的なフォントを使える
- 凝ったフォントも画像にしなくて済むのでSEO的に有利
- 画像ではないので修正が簡単
凝ったフォントについては画像を使用することも多いのですが、画像だと検索エンジンに文字情報として認識されない為、SEO的に不利になります。
また画像だと修正もフォントに比べ手間がかかるので、保守性に関しても画像よりメリットがあると言えます（「フォントは画像で」という案件で凄い大変だった時あり）
Webフォントのデメリット
これまで良いことだらけのように見えますが、しっかりデメリットもあります。
- 有料のフォントもある
- 無料でも利用規約に注意
- ページ速度が遅くなる
これは1つずつ見てみます。
有料のフォントもある
無料で使えるフォントもたくさんありますが、全て無料とは限りません。
それも年額や買い切りなどタイプも様々です。
無料でも利用規約に注意
無料で使えても商用利用が可能とは限らないので、その辺もしっかり確認しましょう。
ページ速度が遅くなる
Webフォントはデータを読み込むので、使用するフォントの種類が多いほどページ速度は遅くなります。
特に日本語フォントは英語フォントと比べてひらがな、カタカナ、漢字と文字数が多いので影響大です。
まとめ
Webフォントはメリットとデメリットをしっかり理解した上で使うことが大切ですね。
ちなみにGoogle Fontsは全て無料で商用利用可能なので、Webフォントを使う際はGoogle Fontsから探すのがおすすめです。
Google Fontsの使い方については以下の記事を参照下さい。