htmlcss Google Fonts の使い方・利用方法

2015年5月31日

Google Fonts(GoogleFonts)の基本的な使い方・利用方法に関するメモ。

内容が古くなっていたので書き換えました。(2017年9月3日)

目次

Google Fonts は「Open Source Fonts」で商用・非商用に関わらず誰でも無料で使用することができる Web フォントを提供するサービスです。

All the fonts in our catalog are free and open source, making beautiful type accessible to anyone for any project.(Google Fonts/About から)

基本的な使い方

使い方はとても簡単で、使いたいフォントを選択して、表示されるフォントの読み込みのコードと font-family の指定のコードをコピーして使うだけです。

使いたいフォントの右上に表示される+のアイコンをクリックします。

使いたいフォントの所にマウスオーバーして+アイコンをクリックして選択する画像

画面下に以下のような黒いバーが表示されるので、クリックします。

フォント選択時に表示される黒いバー

表示されるフォントの読み込みのコードと font-family の指定のコードをコピーして使います。

表示されるフォントの読み込み及び指定のコード

<html>
  <head>
    <!--フォントの読み込み-->
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
    <style>
      div { /*セレクタに font-family を指定*/
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

フォントによっては、太字や斜体の種類が複数あるものもあるので、「CUSTOMIZE」をクリックしてオプションを選択します。(Google Fonts の選択

Google Fonts で使いたいフォントを探す

Google Fonts (https://fonts.google.com/) にアクセスして使いたいフォントを探します。

Google Fonts のページにアクセスすると沢山のフォントが表示されています。右側のフィルタ・オプションを選択することで、探すフォントを絞り込むことができます。

もし、使いたいフォントのキーワード(名前)がわかっていれば、右上の検索ボックス(Search)にキーワードを入れて検索することができます。

Google Fonts 書体のフィルタの画像

右上の検索ボックスの下の「Categories」のチェック項目でフォントの種類を絞り込むことができます。以下が各項目の意味になります。

  • Serif:セリフ・フォント(和文書体の明朝体に相当)
  • Sans Serif:サンセリフ・フォント(和文書体のゴシック体に相当)
  • Display:ディスプレイ用フォント(装飾文字系)
  • Handwriting:手書き風フォント
  • Monospace:等幅フォント(文字の幅が全て同じフォント)

その下の「Sorting」では、ソート(並び替え)の方法を指定でき、「Language」では対応言語(ここには日本語フォントはありません)を指定できます。

Google Fonts 並び替え・言語のフィルタの画像

「Sorting」では、「Trending」がデフォルトで選択されていますが、そこをクリックすると、以下が表示されて、並べ替え方法を指定することができます。

Google Fonts 並び替えのオプション指定の画像

  • Trending:トレンド(最近の流行)順
  • Popular:人気順
  • Date Added:新着順
  • Alphabetical:アルファベット順

その下の、「Number of styles(スタイルの数)」、「Thickness(太さ)」「Slant(傾斜)」「Width(幅)」にチェックを入れると、スライダーが操作できるようになるので、好みに合わせて絞り込むことが可能です。

Google Fonts スタイルのオプション指定の画像

フォントにより、そのフォントが持つ太字や斜体のスタイルの数が異なるので、スライダーで絞り込むことができます。スライダーは右側にするほどそれぞれの値が大きなものが選択されます。複数の項目にチェックを入れると、それらの全ての条件を満たすものが表示されます。

  • Number of styles:スタイルの数
  • Thickness:太さ
  • Slant:傾斜
  • Width:幅

Google Fonts 並び替えのオプション指定の画像2(選択時)

一番下の「CLEAR FILTERS」をクリックするとフィルタを解除できます。

個々のフォントの詳細

使いたいフォントの所にマウスオーバーすると以下のような項目が表示されます。

使いたいフォントの所にマウスオーバーした時に表示される項目

右下の「SEE SPECIMEN」をクリックすると、以下のようなページが表示され、そのフォントの詳細が表示されます。

フォントの詳細表示のページの画像

このページをスクロールすると、そのフォントの持つスタイルや、そのフォントとの組み合わせで良く使用される他のフォントとの組み合わせの表示例などを確認することができます。

フォントの詳細表示のページの画像(スクロールした場合)

良く使用される他のフォントとの組み合わせ(Popular Pairings)の表示例では、表示されているフォントをクリックすると、それぞれの組み合わせが表示されます。上下の矢印をクリックすると、上下のフォントを入れ替えて表示します。

フォントの詳細表示のページの画像(良く使用される他のフォントとの組み合わせの表示例)

元の一覧に戻るには、ページ上部の「DIRECTORY」をクリックするか、戻るボタンをクリックします。

「Sentence」をクリックすると、以下のようなオプションが表示され、「Paragraph(文章のサンプル)」「Alphabet(アルファベット・記号)」「Number(数字)」などの表示を確認できます。

フォントのオプション「Sentence」をクリックした場合の表示

「Custom」をクリックすると、自分で文字を入力することができます。

「Custom」を選択した場合の表示

この時「APPLY TO ALL FONTS」をクリックすると他のフォントに対しても自分で入力した文章を表示させることができます。

「APPLY TO ALL FONTS」をクリックした場合の表示

「Regular」をクリックすると、そのフォントの持つ他のスタイル(ウェイトや傾斜)を選択するオプションが表示され、選択するとそのスタイルで表示されます。

フォントの持つ他のスタイル(ウェイトや傾斜)を選択するオプションの表示

右側のスライダーで表示するフォントの大きさを調節することができます。

フォントの大きさを調節

Google Fonts の選択

使いたい Google Fonts が決まったら+印のアイコンをクリックして選択します。以下のように画面下に「1 Family Selected」と表示されます。フォントは複数選択することができます。選択を解除するには、マイナスのアイコンをクリックします。

フォントの選択時の画像

画面下の黒い部分をクリックします。以下のように表示されます。「Clear All」をクリックすると、選択した全てのフォントを解除します。フォント名の横のマイナスのアイコンをクリックするとそのフォントの選択を解除します。「Customize」をクリックして、太字や斜体などのスタイルのオプションを設定します。

フォントの選択時のオプションの画像

以下のように、そのフォントで使用可能なスタイル(太字や斜体)が表示されるので、必要なスタイルにチェックを入れます。不必要にファイルが重くならないように、不要なものは選択しないようにします。フォントによって複数のウェイトがあるものや1つだけのものなどそれぞれ異なります。

フォントの選択時のオプションの画像(太字や斜体の選択オプション)

スクロールすると言語(Language)のオプションがあります。ここでも不要なものは選択しないようにします。フォントによって複数の言語(Language)があるものや1つだけのものなどそれぞれ異なります。英語アルファベットや記号の表示だけであれば「Latin」だけを選択します。

フォントの選択時のオプションの画像(言語Languageのオプション

Google Fonts の読み込み

前述のオプションの設定が完了したら、「EMBED(埋め込み)」をクリックします。以下のように表示されるので、「Embed Font」の下に表示されているコードをコピーしてフォントを読み込み、「Specify in CSS」の下に表示されているコードをコピーしてフォントの指定を行います。

フォントの読み込み・指定のコード

また、「@IMPORT」をクリックすると、@import を使ったフォントの読み込みのコードが表示されます。(通常は STANDARD の読み込み方法で問題ないと思います)

フォントの読み込み・指定のコード

以下は <head> 内への記述の例です。

<head>
・・・
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
・・・
</head>

Google Fonts の font-family の指定

「Specify in CSS」の下に表示されるコードをコピーします。コピーしたコード(font-family の指定)を CSS の目的のセレクタに設定します。

フォントの CSS のコード

以下は h3 要素を、読み込んだ Google Font (Roboto) で表示する場合の例です。

h3 {
  font-family: 'Roboto', sans-serif;
}
<h3>Roboto (Google Fonts)</h3>

Google Fonts が提供する日本語フォント

現在、日本語フォント 9 種類を「Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access」で試験的に提供しています。

スクロールするとそれぞれのフォントがあり、右側にフォントの読み込みのリンクと font-family の指定が記載されています。

Google Fonts のダウンロード

Photoshop などで Google Fonts を利用したい場合などダウンロードすることができます。目的のフォントの+印のアイコンを選択して、必要に応じてオプションを設定します。その後右上のダウンロードのアイコンにマウスオーバーします。

フォントのダウンロードのオプション

以下のようなメッセージが表示されます。ダウンロードのアイコンをクリックすると、ダウンロードのダイアログが表示されます。

フォントのダウンロードの際に表示されるメッセージ

フォントのファイルを保存します。ZIP ファイルになっているので、適当な場所に解凍します。

フォントのダウンロードのダイアログ画面

Windows の場合はコントロールパネルから「フォント」を選択して、ダウンロードしたフォントをドラッグするとインストールできます。

フダウンロードしたフォントのインストール(Windows の場合)

フォントが問題なくインストールされれば、Photoshop 等のアプリケーションで使用できるようになります。

ダウンロードしたフォントの使用(Photoshopの例)

関連ページ:「Google Web Fonts がブラウザによって表示が異なる