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

1

 

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

 

 

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

 

 

目次

  1. Google フォントとは?
  2. Google フォントの実装方法
  3. 実用で使える、Google フォントの組み合わせ パート1
  4. 実用で使える、Google フォントの組み合わせ パート2
  5. Google Web フォントを見つけやすくする Font Library
  6. Google 謹製、日本語 Web フォント「Noto Sans Japanese」

 

 

Google Font とは?

google-web-font

 

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

 

 

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

 

 

 

Google Web フォントの使用手順

 

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

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

 

 

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

google-font-step-1

 

 

 

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

google-font-step-2

 

 

 

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

google-font-step-3

 

 

 

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

google-font-step-4

 

 

 

設定が面倒というひとは、以下のコードをコピーし、新規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 フォントの組み合わせ パート1

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

 

 

Pixie One + Libre Bakserville

nixie-one-libre-baskerville-italic

 

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

 

 

Oswald + Domine

oswald-domine

 

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

 

 

Quicksand + EB Garamond

quicksand-eb-garamond

 

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

 

 

Cardo + Almendra Display

cardo-almendra-display

 

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

 

 

Playfair Display + Fauna One

playfair-fauna-one

 

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

 

 

Raleway + Merriweather

raleway-merriweather

 

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

 

 

Gentium Basic + Open Sans Light

gentium-basic-open-sans-light

 

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

 

 

Lora + Open Sans

lora-open-sans

 

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

 

 

Lobster + Muli

lobster-muli

 

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

 

 

PT Sans + PT Serif

pt-sans-pt-serif

 

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

 

 

 

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

 

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

 

 

Muli + Playfair Display

5f470035768979.570b81f65e26b

 

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

 

 

Mr. De Haviland + Neuton

19d86335768979.570344c9d2e8f

 

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

 

 

Oswald + Open Sans

8e65f035768979.570b81f65c4ac

 

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

 

 

Oswald + Quattrocento

e30ee335768979.570344c9d2835

 

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

 

 

Playfair Display + Slabo

1c942935768979.570344c9d3a3f

 

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

 

 

Oepn Sans  + Prata

9b931b35768979.570344c9d1524

 

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

 

 

Sintony + Dancing Script

9e519d35768979.570b81f65cbc1

 

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

 

 

Old Standard TT + Questrial

87c68635768979.570344c9d3565

 

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

 

 

Julius Snas One + Crimson Text

95d69935768979.570344c9d23d0

 

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

 

 

Nixie One + Libre Baskerville

df107635768979.570344c9d1ead

 

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

 

 

Quattrocentro + Fanwood

17c21b35768979.570344c9d1027

 

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

 

 

Sintony + Poppins

76558c35768979.570b81f65e8fd

 

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

 

 

Playfair Display + Fauna One

2ecbdf35768979.570b81f65ef5f

 

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

 

 

Playfair Display + Fauna One

16b1fd35768979.570344c9d090a

 

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

 

 

Alfa Slab One + Gentium Book Basic

557f5935768979.570344c9d1a1a

 

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

 

 

 

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

 

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

font-library-1

 

 

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

font-library-2

 

 

 

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の公式ドキュメントを参考にどうぞ。

 

 

 

おわりに。

 

テクノロジーの進化や、回線速度が早くなったことで、これまで以上に Web フォントを活用できる機会は増えています。これを機会に活用してみてはいかがでしょう。