WEBデザインをしていると、当たり前のように使っている「フォント」。
ですが、「なぜこのフォントはどの端末でも同じ見た目になるのか？」「WEBフォントとデバイスフォントは何が違うのか？」と聞かれると、意外と説明に詰まってしまうことはありませんか？

今回は、そんな疑問を解消するために、WEBデザインやコーディングの基礎知識として欠かせないWEBフォントの仕組みと特性について解説していきます。
これからWEB制作を始める方はもちろん、知識の再確認としても役立つ内容になっています。それでは見ていきましょう。

WEBフォントの仕組み

WEBフォントとは、Webサイトを表示するときに、フォントをインターネット経由で読み込んで表示する仕組みのことです。
見る人のパソコンやスマホにそのフォントが入っていなくても、制作者が指定したフォントで表示できるのが大きな特徴です。
一方、デバイスフォントは、パソコンやスマホに最初から入っているフォントのことです。游ゴシック・メイリオ・ヒラギノ角ゴ・Arialなどがこれにあたります。

WEBフォントの特性

WEBフォントの強みは、何と言ってもデザインのコントロール性の高さです！
独自性のある書体を使えるので、ブランドイメージを文字で表現できたり、ロゴに近い役割を持たせられるなど、デバイスフォントでは難しい表現を可能にする点が、WEBフォントの大きな価値といえますね。

注意点

日本語フォントはデータが重くなりがちなので、基本日本語フォントは1サイト1つにすること。

WEBフォントの入手方法

もっとも手軽で、多くのWebサイトで使われている方法です。
フォントはサービス側のサーバーから配信されます。

・Google Fonts（無料・商用利用可が多い）　https://fonts.google.com/
・Adobe Fonts（Adobe契約者向け）　https://fonts.adobe.com/
・FONTPLUS　https://fontplus.jp/home
・Morisawa Fonts　https://morisawafonts.com/plans/webfont/

注意点

商用利用OKか。WEBフォント利用が許可されているかどうかは必ずチェックしましょう。特に「無料フォント」＝「何でもOK」ではない点には注意が必要です。

まとめ

WEBフォントは、Webサイトの印象をグッと良くしてくれる便利な存在です。
ただし、使いすぎると表示速度に影響が出ることもあるので注意しましょう。

本文は読みやすさ重視でデバイスフォント、
見出しやポイント部分はWEBフォント、
といったように上手に使い分けるのがおすすめです。

デザインと使いやすさのバランスを考えながら、
サイトに合ったフォント選びを楽しんでみてください。