Googleフォントの使い方まとめ

SPONSORLINK

Googlefonts(グーグルフォント)とはGoogleが無料で提供してくれているWEBフォントです。自分のサーバーにインストールすること無くちょっとしたコードをサイト内に書き込むだけでデザイン性の高いフォントが利用できるようになります。

2015年1月時点で670種類ものフォントが登録されており、その全てを無料で利用可能です。
今回はGoogleフォントの基本的な使い方をご紹介します。

フォントの探し方

種類で絞り込む

まず冒頭でも述べた通り、670種類もの中から目当てのものを見つけるのは至難の業です。そこで何となくフォントのデザインを絞り込むことができます。

Google_Fonts

画面左にある「All categories」をクリックすれば5つの種類が表示され、そのチェックを外してやることで、そのカテゴリにあったフォントのみに絞り込むことが可能です。

例えば「Serif」のみにチェックを入れた場合はこのように明朝体のようなハネのあるデザインのフォントばかりに絞り込むことができます。

Googleセリフフォント

各カテゴリのざっくりとした意味は下記のような感じです。

  • Serif(セリフ)…端っこなどにハネのある明朝体のようなデザインのフォント
  • Sans Serif(サンセリフ)…ハネのないゴシック調のフォント
  • Display(ディスプレイ)…装飾文字。変わったものが多い
  • Handwriting(ハンドライティング)…文字通り手書き風のフォント
  • Monospace(モノスペース)…別名「等幅フォント」は文字によらず全て同じ横幅でつくられている

お気に入りを見比べる

カテゴリを絞ったとしても1つに絞るのは難しいと思います。そんなときは気になるものをお気に入りに登録して、後でお気に入りだけを一覧で表示する方法もあります。

一覧から気にいったもの、気になるものを見つけたら「Add to Collection」を押すだけ。とりあえず気になったものを選んでいきましょう。

お気に入りに追加するGoogle_Fonts

お気に入りから外したい場合は「Remove from Collection」を押せば元に戻せます。

いくらでも追加できますが、あまり多すぎてもまた迷ってしまうので10個位には絞りたいですね。

そして、ブラウザの下に今選択しているフォントの数が表示されるので、現在どれくらい選択しているかもわかります。

お気に入り一覧Google_Fonts

ある程度フォントが絞り込めたら「Review」を押してみます。すると今選択しているフォントのみを一覧表示できるので、ここからさらに絞り込んでいきます。

一覧表示Google_Fonts

任意のテキストを入力してイメージしやすくする

フォントを探す際に、実際に使用するテキストを入力してあげることでさらにイメージしやすくなります。

テキストを変更 Google_Fonts
  • 日本語は表示されないので必ず半角英数字で!

一覧の表示方法を変更する

これまで一覧ページでは縦につらつらとフォントが並んでいましたが、他にも複数の表示方法があります。

Word(ワード)

WordGoogle_Fonts

一覧表示するのに適しています。

Sentence(センテンス)

Sentence Google_Fonts

デフォルトの表示。ちょっと眺めの見出しなどのイメージで表示するのに適しています。

Paragraph(パラグラフ)

Paragraph Google_Fonts

眺めの文章を表示するのに適しています。(日本語サイトだとこの表示は使わないかもしれませんが…)

Poster(ポスター)

Poster Google_Fonts

ポスターは実際のフォント名と一覧がずらっと表示されます。一気に見たい場合はこちらが一番多く見れる。

フォントの使い方

使い方はひとつだけ読み込む場合と、複数読み込む場合とでは手順が少し違います。

ひとつのフォントを読み込みたい場合

1. 選んだフォントの【→】(Quick-use)をクリック。

QuickユーズGoogle_Fonts

2. font-weightを選択

太さを選択Google_Fonts

3. 読み込み用のコードを<head>内にコピペ

読み込み用コードを選択Google_Fonts

4. 最後は適用させたいプロパティに指定のfont-familyを適用させてあげるだけ!

適用させたいものにスタイルを記述Google_Fonts

当然フォントなので、文字の色を変えたり、サイズを変更したりというのは自由自在です!ここが便利なところですよね。

複数のフォントを読み込みたい場合

複数読み込みたい場合は、もちろん一つづつ上のて手順を繰り返してもいいのですが、<head>内がごちゃごちゃしてきてもいやなので、まとめて読み込みたいですよね。それもGoogleさんが読み込み用コードを生成してくれます。

例えばお気に入り(コレクション)に3種類フォントを選んだ状態とします。

ここで右端の「Use」をクリック。

フォント複数

するとそれだけで3つのフォントを読み込んでくれているので、あとは先ほどと同じようにfont-weightを選択して、<head>内にコードを書きこんであげればOKです。

Google_Fonts
<link href='http://fonts.googleapis.com/css?family=Lato|Roboto+Slab|Roboto' rel='stylesheet' type='text/css'>

生成されたコードをみてみると、ちゃんと3つがまとまって読み込まれているのがわかります。

追記(2015/02/27)

<head>内に記述したくない場合はスタイルシートから読み込むことも可能です。

GoogleWEBフォントを外部スタイルシートから読み込む方法

2015.02.27

まとめ

今回はGoogleフォントの基本的な使い方についてまとめてみました。日本語が使えないというのは難点ではありますが、デザインのワンポイントと考えれば便利に使えるツール(テクニック?)だとおもいます。

またレティナディスプレイなどの解像度の高いものでみても、画像のように荒れたりしない。というのもいい点ですよね。Googleフォントをうまくサイトに取り入れて、デザインをワンランクアップさせてみてはいかがでしょうか。

SPONSORLINK

\このサイトでつかってるのはこれ/

インパクトのあるアニメーション
WPテーマ「ハミングバード」

インパクトのあるアニメーションでブログを演出します。

新作!究極のモバイルファースト
WPテーマ「ストーク」

「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。

誰が使っても美しいデザイン
WPテーマ「アルバトロス」

シンプルかつ正統派のブログテーマです。

ABOUTこの記事をかいた人

香川県(うどん県)にてフリーランスWEBデザイナー/ディレクターとして活動。小規模なWEBサイト制作を得意とし、コンセプト設計からデザイン、コーディング、撮影にいたるまでのすべてをこなします。地方の良さを全国に広めていくお手伝いをしていきたいと思っています。