Webフォントを使う「Googleフォント」
Webサイトで表示されるフォント（字体）は基本的にそのページを見る端末にインストールされているフォントに依存します。
そのため、必ずしも制作側の設定したフォントがユーザーに見てもらえるとは限りません。
どのユーザーにも同じフォントで表示されるようにするには、「Webフォント」を使うのが一般的です。
「Webフォント」とは、インターネット経由でフォントデータを読み込み、それを反映させるため、端末を問わず同じフォントで表示させることができる仕組みです。
その「Webフォント」も様々なサービスを使うことで利用できるようになるのですが、ここではGoogleが提供している無料のWebフォントである「Googleフォント」の使い方について解説していきます。
Googleフォントの使い方
「Googleフォント」では、全体で1500種類以上のフォントを使うことができ、日本語のフォントも64種類ほど登録されています。
しかも、これだけのフォントがすべて無料で使うことができるため利用者も多く、情報も探しやすいので初心者にもおすすめのWebフォントとなります。
1.フォントを選ぶ（日本語フォントの場合）
1.まずはじめに、「Googleフォント」にアクセスし、「Langage」から「Japanese」を選びます。
ゴシック体や明朝体などの読みやすいフォントから、手書き風などの個性的なフォントまで用意されているため、自分が制作するWebページの世界観に合わせてフォントを選びます。
2.使用するフォントをクリックして、「Get font」をクリックします。
使用するフォントは複数選択できます。また、後から追加することも可能です。
3.使用するフォントの一覧が表示されるため「<> Get embed code」のボタンをクリックします。
Google Fontsはダウンロードすることもでき、PCにインストールしてPhotoshopやIllustratorで使うこともできます。
2.CSSもしくはHTMLに読み込みコードを記述。
1.「Embed code in the <head> of your html」にあるコードをコピーし、HTMLファイルの<head>タグ内に貼り付けます。
「@import」のタブではCSSファイルに貼り付けが可能な形式のコードを取得できるので、いずれかのコードを使ってください。
※もし、使用するフォントに変更（追加・削除）した場合は、フォント情報が変わるため、必ずコードを差し替えてください。
2.CSSファイルに「font-family: “使用するフォント”;」の部分をコピペします。
※CSSに貼り付けるときは、セレクターの指定先に注意
3.Google Fontsの使用例
フォントが適用されるとこのように表示されます。
・Kiwi Maruフォント
Kiwi Maruフォント
・Hachi maru pop
Hachimaru popのフォント
基本的にはこの手順で簡単にWebフォントを導入することができます。
Webサイトをより良く見せるのに有効的なWebフォントですが、多少ページの読み込みが多少遅くなる傾向があり、特にフォントデータの大きい日本語フォントを使用する時は、このことを頭に入れておく必要があります。
詰め込みすぎるとさらに遅くなってしまう可能性がありますので、バランスを考えた使い方が必要になってきます。
