Google Fontsの特徴、選び方、設定と注意点

世界中の多くのWebサイトやブログで幅広く利用されているGoogle Fontsの特徴とサイトに導入する方法を紹介します。

目次 - Table of Contents

1 Google Fontsとは
- 1.1 Webフォントを使うとページ表示が遅くなる？
- 1.2 Web フォントを使用する際の留意点、注意事項
2 Google Fontsの選び方
3 Google Fontsの導入方法

Google Fontsとは

Google Fontsは、オープンソースのデザイナーフォントです。様々なデザインのフォントが無料で利用可能です。Google Fontsは、Webフォントです。ウェッブフォントは、サイトを訪問した端末にダウンロードして利用されます。そのため、端末の種類に関係なく、同じフォントを使用してページを表示することができます。

備考：
Webフォントを使用しない場合、端末に搭載されているフォントが表示されます。搭載されるフォントは端末によって異なります。例えば、iPhoneとAndroid、WindowsとMacでは搭載されているフォントが異なります。

Webフォントを使うとページ表示が遅くなる？

Web フォントは、サイトのページのパフォーマンス、保守性、アクセスビリティを向上させる可能性が高いです。

Google DeveloperサイトのGoogle FontsのFAQ の説明の概要を訳して、以下に紹介します。

他のアセットと同様にフォントファイルは、表示される前にサイト訪問者のコンピューターにダウンロードされる必要があります。Google Fonts APIによって提供されるフォントは、ダウンロード高速化するために、自動的に圧縮されています。フォントは、一度ダウンロードされると、ブラウザーのキャッシュに格納され、Google Fonts APIを使用する他のウェッブぺージでも再利用されます。

Google Fonts APIは、幅広く普及されているため、あなたのサイトの訪問者やページは既にブラウザーキャッシュに格納されたGoogle Fontsが使用される場合が多いです。

基本的に、サイトやページに利用されるフォントファイルのサイズを考慮すべきです。Googleは、必要なスクリプト、スタイル、ファミリーのみ埋め込むことを推奨しています。フォント選択欄の右上にページのロードタイムインディケーター（指針）があります。インディケーターは、”カスタマイズ”タブに選択したフォント（スクリプト、ファミリー、スタイル）がロードされる時間の目安の見積もり（遅い、中間、早い）を示します。

例：以下は、”Open Sans”を選択した時のロードタイムインディケーターは、”Load Time: Fast” （ロード時間は早い）となっています。

Web フォントを使用する際の留意点、注意事項

上で紹介したように、Web フォントはサイトを訪問した端末にフォントデータをダウンロードして使用します。一度ロードされたフォントは、ブラウザーのキャッシュに格納されるため、次のページや次の訪問時には、キャッシュからロードされるため高速で表示されます。また、同じGoogleフォントを使用している他のサイトやページを過去に訪問したことのある端末では、同様に既にフォントはキャッシュに保持されているため、高速に表示されます。

Webフォントは、最低限必要なものだけロードするように設定しておくと、ページ表示スピードの最適化ができます。ページで使用するフォントを限定する、使用しないフォントはロードしないようにすることが重要です。必要なもの以外は使用しないことは、Web フォントに限られたことではなく、使用しない機能、プログラム、プラグインなどは削除するのがサイトの最適化の基本です。

Google Fontsの選び方

Google Fonts のページを訪問して、サイトで使用するお好みのフォントを選びます。Google Fontsは、利用可能なフォントの種類が非常に多いです。2018年4月の時点で、877のフォントファミリーが利用可能になっています。使用したいフォントが決まっている場合は、検索を使用すると便利です。特に使用したいフォントが決まっていない場合は、フォントの種類など条件を指定して、絞り込むことができます。以下、絞り込む方法を紹介します。

カテゴリー (Categories)

Google Fontsは、以下の5種類のカテゴリーに分類されています。

Serif
Sans Serif
Display
Handwriting
Monospace

Serifは、セリフ体と呼ばれる字体です。細くラインの終端に少し装飾が入るのが特徴です。日本語フォントでの明朝体が相当します。Sans Serifは、”without serifs”の意味で、セリフがない字体のことです。日本語では、ゴシック体が近いです。（ゴシック体だけでなくセリフでないものは全てSans Serifです。）

Display と言うのは、Display type または、Display typefaceと呼ばれるフォントのタイプです。ディスプレイタイプは、元来、文字通りディスプレイ用のもので、30ポイント以上の大きな文字サイズで使用されることを前提にデザインされたフォントタイプになります。デフォルトの文字間が詰まっていて、細かい装飾が施されていたり、文字の外観が凝縮されたり、太い部分と細い部分の差が大きい等の特徴を持っています。(WikipediaのDisplay typeの説明からの該訳）

Handwritingは、文字通り手書きです。Monospaceは、スペースが均一な文字タイプです。（端的には、均等の文字幅）

Google Fontsの一覧（ディレクトリー）ページのサイドバーに表示されるカテゴリーのチェックボックスをチェックしたり、外したりすることで該当するカテゴリーのフォントの表示、非表示を切り替え、絞り込むことができます。

表示順を指定

Google Fontsの表示する順番は、以下の4種類の選択肢があります。

Trending （トレンド（流行）順）
Popular（人気順）
Date Added（加えられた日順）
Alphabetical（アルファベット順）

種類、特徴で絞り込む

Google Fontsの種類特徴で絞り込む以下の様な選択肢があります。

Number of Styles（スタイルの数）
Thickness（太さ）
Slant（傾き）
Width（幅）

フォントファミリーが提供するスタイルの数（種類）で絞り込むことができます。例えば、Robotは、細い、軽い、通常、ミディアム、ボールド、ブラックそれぞれに、通常とイタリックの計12のスタイルが用意されています。

Thicknessは文字のラインの太さです。太いものから細いものなど、スライドを動かして選択を絞り込むことができます。

Slantは傾きです。傾斜が強いものと弱いものを選んで表示することができます。Width、文字幅も広い狭いをスライダーで選択して絞り込んで表示可能です。

以下の表示項目で絞り込みを行うものにチェックを入れて、左右にスライドさせることで、対象を絞り込むことができます。

文字をタイプして表示を比較確認

表示されているサンプル文字を、お好みの文字を入力して、表示確認することができます。

“APPLY TO ALL FONTS”の部分をクリックすると、全てのフォントにカスタム入力した文字列が適用されます。一覧で表示されると、比較してどのように表示されるかが具体的に分かり、選びやすいです。

Google Fontsの導入方法

Google Fontsをサイトに導入する手順を紹介します。

使用するフォントの選択

利用するフォントファミリーを選んだら、そのフォント枠の右上のプラスアイコンをクリックします。利用したいフォントが複数ある場合は、該当するフォントミリーの枠の右上のをクリックして追加します。

プラスアイコンをクリックすると、ドロウワー（引き出し）に追加され、画面下に”Family Selected”と表示されます。

フォントファミリーの選択後、ドロウワーの右のアンダーバーアイコンをクリックすると、選択したフォントファミリーの設定情報が表示されます。

備考：
Webフォント選択時の留意点と注意事項に記載したように使用するフォント（含むスタイル）の数は絞り込んだ方がよりページを高速に表示することができます。フォントのロード時間の目安となる指針、”Load Time: Fast”であることが目安となります。

フォントファミリーの設定情報の”CUSTOMIZE”をクリックすると提供されるスタイルの一覧が表示されます。利用するスタイルにチェックを入れます。必要以上に選択するとロード時間が余計かかります。必要なスタイルのみを選びます。特に様々なスタイルを使い分けるなどの理由がなければ、基本的には1つ選べば十分です。