Google Web フォント完全ガイド！使い方や参考にしたいサンプル例まとめました。

どんなデザインにおいても、ただしいフォント選びが成功の鍵となります。見た目だけでなく、読みやすさも考えながら、フォントの組み合わせを考えるのに悩んでしまうこともしばしばです。

フォントの組み合わせについては、これまでにもいくつか（1/２/３）の記事を紹介していますが、今回は、Google Web フォントを利用した、実用的でデザインも美しいサンプル例をまとめています。

Google Font とは?

通常、ブラウザで表示できるフォントは、ユーザーのパソコンにインストールされたものだけとなります。ユーザーによってインストールしているフォントは違うため、これまではデフォルトでインストールされた書体だけを利用していました。

Goolge が提供している Web フォントサービスを利用すれば、クラウド上に保存されたフォントを利用するので、ユーザー環境に関係なく、お好みのフォントをスタイリング、設定することができます。すべて無料で利用できるだけでなく、商用利用にも対応することができる点もポイントです。

Google Web フォントの使用手順

Google Web フォントは、以下の簡単な手順のみで、どんなウェブサイトにも利用することができます。

Google Web フォントにアクセスする。
利用したいフォントを、コレクションに追加する。
選択したフォントの詳細情報を設定する。
Webページのタグの直下にコードをコピーする。
CSSファイルにコードを追記し、Googleフォントを実装完了。

まずは Google Web　フォントにアクセスし、お好みのフォントを見つけましょう。つづけて「Add to Collections」に追加します。

「USE」ボタンをクリックすると、選択したフォントの詳細を選択することができます。ここでは、太さの異なる２種類のスタイルを読み込んでいます。右側に表示されたメーターを確認することで、読み込み速度にどのくらい影響があるのか確認することもできます。

「Add this　cod to your Website」の下に表示されたコードをコピーしたら、Google Web フォントを利用したいウェブページの直下に貼り付けます。

google-font-step-3

あとは一緒に表示されている CSSスタイルをコピーし、お好みの文字テキストに適用すれば完了です。

設定が面倒というひとは、以下のコードをコピーし、新規HTMLファイルを作成することで、Google Web フォントを適用するときのテンプレートとして活用してみましょう。

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8”>
<style type=”text/css”>
body {
    font-size: 42px;
    font-family: 'Abril Fatface', cursive;
}
</style>
<link href='https://fonts.googleapis.com/css?family=Abril+Fatface' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>google web font</h1>
</body>
</html>

実用で使える、Google フォントの組み合わせ　パート１

10 Fresh Google Fonts Pairings That Work Perfectly Together　では、実際に Google Web　フォントを利用して、美しいデザインが表現されています。もちろん無料ダウンロードでき、商用ライセンスにも対応しているので、幅広いアイデアに利用できます。

Pixie One + Libre Bakserville

Google Fonts から Pixie One Regular と Libre Baskerville Italic をダウンロードする。

Oswald + Domine

Google Fonts から Oswald Bold と Domine Regular をダウンロードする。

Quicksand + EB Garamond

Google Fonts から Quicksand Light / Bold と EB Gramond Regular をダウンロードする。

Cardo + Almendra Display

Google Fonts から Cardo Regular と Almendra Display Regular をダウンロードする。

Playfair Display + Fauna One

Google Fonts から Playfair Display Black / Black Italic と Fauna One Regular をダウンロードする。

Raleway + Merriweather

Google Fonts から Raleway Light / Medium / Bold と Merriweather Light をダウンロードする。

Gentium Basic + Open Sans Light

Google Fonts から Gentium Basic Regular / Bold Italic と Open Sans Light をダウンロードする。

Lora + Open Sans

Google Fonts から Lora Regular と Open Sans Extrabold をダウンロードする。

Lobster + Muli

Google Fonts から Lora Regular と Muli Italic / Regular をダウンロードする。

PT Sans + PT Serif

Google Fonts から PT Sans と PT Serif Bold をダウンロードする。

実用で使える、Google フォントの組み合わせ　パート2

Typography: Google Fonts Combination　では、実際にフォントを利用した様子を、デザインサンプル例と一緒に公開しています。font-spacingやline-heightなど細かい設定も記載されています。

Muli + Playfair Display

Google Fonts からMuli Italic / Regular と Playfair Display を無料ダウンロードする。

Mr. De Haviland + Neuton

Google Fonts から Mr De Haviland と Neuton を無料ダウンロードする。

Oswald + Open Sans

Google Fonts からOswald とOpen Sans を無料ダウンロードする。

Oswald + Quattrocento

Google Fonts からOswald と Quattrocento を無料ダウンロードする。

Playfair Display + Slabo

Google Fonts からPlayfair Display と Slabo を無料ダウンロードする。

Oepn Sans + Prata

Google Fonts からOpen Sans と Prata を無料ダウンロードする。

Sintony + Dancing Script

Google Fonts からSintony と Dancing Script を無料ダウンロードする。

Old Standard TT + Questrial

Google Fonts からOld Standard TT と Questrial を無料ダウンロードする。

Julius Snas One + Crimson Text

Google Fonts からJulius Sans One と Crimson Text を無料ダウンロードする。

Nixie One + Libre Baskerville

Google Fonts からNixie One とLibre Baskerville を無料ダウンロードする。

Quattrocentro + Fanwood

Google Fonts からQuattrocento と Fanwood Text を無料ダウンロードする。

Sintony + Poppins

Google Fonts からSintony と Poppins を無料ダウンロードする。

Playfair Display + Fauna One

Google Fonts からRufina と Oxygen を無料ダウンロードする。

Playfair Display + Fauna One

Google Fonts から Playfair Display と Fauna One を無料ダウンロードする。

Alfa Slab One + Gentium Book Basic

Google Fonts から Alfa Slab One と Gentium Book Base を無料ダウンロードする。

Google Web フォントを見つけやすくする Font Library

Google Web フォントには、現在700種類を超えるフリーフォントが収録されていますが、カテゴリー分けは「セリフ書体、サンセリフ書体、手書き」など、大きなカテゴリ5つにのみ分けられており、プロジェクトに合ったお好みのフォントを見つけるのは大変です。

そんなときは、 Font Library を活用してみましょう。各フォントごとに人力でタグ、キーワード整理がされているので、直感的にフリーフォントを探すことができます。

Google 謹製、日本語 Web フォント「Noto Sans Japanese」

「日本語Webフォントを使いたいけど、重くなるのはちょっと、、。」と、ウェブサイトへの導入を見送っているひともいるかと思います。しかし、Google の提供する「Noto Sans Japanese」を利用することで、デザインや表現の幅を広げてくれるかもしれません。

Noto とは、Google と Adobe が共同で開発したフォント書体で、2014年に公開されました。日本語や韓国語、タイ語など、世界中のあらゆる言語がサポートされており、文字の太さに応じて9種類が用意されています。

Noto Sans Japanese の利用方法

利用方法もとてもシンプルで、まずは以下のコードを利用したいウェブページの

直下に記述するか、

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

「@import」をつかって読み込む場合は、利用しているスタイルシートに以下のコードを記述しましょう。ただし、読み込み速度に悪影響があるというデメリットも。

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

あとは、利用したい要素に応じて、font-family を指定すれば完了です。以下は、ウェブサイト全体に Noto Sans Japanese を適用したとき。

body {
font-family: 'Noto Sans Japanese', serif;
}

たとえばタイトルや見出しなど、部分的に太さを調整することで、うまく文字の階層をつくることもできます。

.noto100 {font-weight:100;}
.noto200 {font-weight:200;}
.noto300 {font-weight:300;}
.noto400 {font-weight:400;}
.noto500 {font-weight:500;}
.noto600 {font-weight:600;}
.noto700 {font-weight:700;}
.noto800 {font-weight:800;}
.noto900 {font-weight:900;}

実際に Noto Sans Japanese を実装してみたサンプルも用意しています、よかったらこちらもどうぞ。また、より詳しい設定については、Googleの公式ドキュメントを参考にどうぞ。