ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

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

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

世界中の多くのWebサイトやブログで幅広く利用されている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” (ロード時間は早い)となっています。

選択したGoogle Fontsのロード時間目安表示

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のカテゴリー

表示順を指定

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

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

Google Fontsの表示する順番

種類、特徴で絞り込む

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

  • Number of Styles(スタイルの数)
  • Thickness(太さ)
  • Slant(傾き)
  • Width(幅)

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

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

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

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

Google Fontsの種類特徴で絞り込み表示機能

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

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

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

テスト文字入力を全てのフォントに適用して比較できます

Google Fontsの導入方法

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

使用するフォントの選択

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

利用するフォントファミリーの枠右上のプラスボタンをクリックします

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

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

選択したフォントファミリーの設定情報

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

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

Google Fontsをサイトに組み込む

選択したフォントファミリーのサイトの埋め込みコードをコピーして、サイトの<head>タグ内に貼り付けます。

Google Fontsの埋め込みコードをコピーします。

<head>タグ内へのコードの貼り付け設置する方法は、AdSense 自動広告コードの設置方法と同じです。CMS毎の<head>タグ内の設置方法について詳しくは以下のリンクをご参照下さい。

CSSに使用するGoogle Fonts フォントファミリーを設定

CSSに利用するGoogle Fontsのフォントファミリー名を追加設定します。

Google Fonts フォントファミリー名

例えば、以下の様にCSSに記述を加えます。

body { font: 16px “Roboto”, “メイリオ”, “ヒラギノ角ゴ Pro W3”, “MS Pゴシック”, sans-serif; }

上の例は、ページ全体(body)の文字のフォントの設定です。

ページを表示して、設定したフォントが表示されていれば、作業完了です。

コメントを残す(承認後表示されます)

*
*
* (will not be published.)

Return Top