Webフォント初心者にオススメ！Google Fontsの使い方3STEP

自社のWebページを制作する時、「せっかくなら機能だけではなく、デザインにもこだわりたい！」と考える方は少なくないはずです。

一言にデザインといっても、イラストや写真などの素材、ページ全体のレイアウトなど、工夫できるポイントは様々です。中でも、ユーザーが必ず目を向ける*文字（フォント）*は、そのWebページが訴求したいイメージやコンセプトを表現するための重要なポイントです。そこで活用したいのが、「Webフォント」です。

Webフォントは、サーバーからデータを読み込んでWebページに表示できるフォントのことで、端末や閲覧環境にかかわらず、統一したフォントデザインで表示できることが魅力です。

今回は、Webフォントの基礎を解説した上で、Google社が提供するWebフォントサービス「Google Fonts」の基本的な使い方を紹介します。
　　

Webフォントとは

Webフォントとは、データをサーバーから読み込み、Webページに表示させることができるフォントのことです。サーバーから直接フォントのデータを読み込むため、どの端末から閲覧しても同じフォントを表示できます。
　　

メリット

どの端末からでも統一して表示できる

通常のフォントは、そのWebページを見ているパソコンやスマートフォンなどの端末に、あらかじめインストールされているフォントしか表示できません。そのため、閲覧ユーザーによっては、そのWebページの印象が変わってしまう可能性があります。

しかしWebフォントであれば、どの端末からでも同じフォントで表示できるため、表示環境に左右されにくいのが特徴です。
　　

更新・運用が簡単に行える

Webフォントが普及する前は、ユーザーの端末によって表示が異なる可能性のあるフォントは、画像データで表示して対応していました。しかし、テキストではないために検索ができずSEO対策に不利だったり、表示させる箇所や端末に応じて画像を作り分けなければならなかったりというデメリットがありました。

一方Webフォントはコードを入力するだけなので、テキストとして表示させながら、Webページの更新や運用ができるようになります。
　　

デザインの差別化ができる

最近は様々な種類のWebフォントが登場しています。自社のイメージやコンセプトに合わせて取り入れることで、他社との差別化ができ、アピールポイントを訴求しやすくなるでしょう。
　　

注意すべき点

データ量によっては表示が遅くなる

Webフォントはサーバーから読み込むため、フォントの種類によってはデータ量がかさみ、表示が遅くなることがあります。特に日本語の漢字などは、字画も多いので注意しましょう。
　　

日本語のフォントの種類が少ない

日本語は、ひらがな・カタカナ・漢字と文字の種類が多いため、全てに対応しているWebフォントは多くありません。

利用するWebフォントで対応していない文字があると、その文字のみ通常フォントで表示されてしまいます。その場合は、見栄えの悪さを防ぐためにも、ロゴなどの英数字はWebフォントを利用し、通常の日本語の文章は通常フォントで行うなど、使い分けてみましょう。

ちなみに、以前ferretでは日本語のWebフォントを提供しているサービスをご紹介しています。良ければ参考にしてみてください。

参考
【保存版】和文のWebフォントサイト30選｜ferret
　　

著作権（ライセンス）に注意する

Webフォントの提供サイトには、「商用利用の可否」「利用できるWebページの種類」「再配布」などに関する規約があります。利用する際は、提供サイトの規約をしっかり確認してから使用しましょう。