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

2015年5月31日

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

Google Fonts は「Open Source Fonts」で商用・非商用に関わらす無料で使用することができます。About Google Fonts

目次

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

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

GoogleFonts_01

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

GoogleFonts_02

検索ボックスの下の「All Categories」をクリックしてカテゴリーを絞り込むことが可能です。

GoogleFonts_03

  • Serif :明朝体
  • Sans-serif :ゴシック体
  • Display :装飾フォント
  • Handwriting :筆記体・草書体
  • Monospace : 等幅フォント

その下の、「Thickness(太さ)」「Slant(傾斜)」「Width(幅)」をそれぞれクリックするとバーが表示されるので、好みに合わせて絞り込むことが可能です。

GoogleFonts_04

「Preview Text」の横の ▼ をクリックして「Enter your own text」を選択すると、任意のテキストを入力してそれを元にフォントを選ぶことができます。

GoogleFonts_05

「Size」の横の ▼ をクリックしてフォントのサイズも変更可能です。

GoogleFonts_06

デフォルトでは、おそらく「Sentence」のタブが選択されていますが、その他に「Word」「Paragraph」「Poster」のタブがあるので、目的に合わせて(見出しとして使いたいのか、本文として使いたいのか等)それらのタブでフォントを表示させることができます。

「Word」
GoogleFonts_23

「Paragraph」
GoogleFonts_24

「Poster」
GoogleFonts_25

「Add to Collection」をクリックしてコレクションに追加したり、「Remove from Collection」をクリックしてコレクションから削除することができます。

GoogleFonts_07

追加したコレクションは、ページ右下の「Review」をクリックして表示して比較することができます。

GoogleFonts_08

また、フォントの選択に戻るにはページ右下の「Choose」をクリックします。

各フォントの右下の下向きの矢印の四角が表示されていれば、複数のFont-Weight(ウェイト) があるので、クリックすると表示されます。

GoogleFonts_09

Google Fonts を選択

使いたい Google Fonts が決まったら選択します。選択するには、個々の Google Fonts の右下の「Quick-use」のアイコンをクリックするか、コレクションに追加している場合は、ページ右下の「Use」のアイコンをクリックします。

GoogleFonts_10

GoogleFonts_12

以下のようなページが表示されます。

GoogleFonts_13

「1. Choose the styles you want:」でフォントのウェイトを選択できます。不要なものは選択しない方が軽くなります。フォントによって複数のウェイトがあるものや1つだけのものなど異なります。

スクロールして「2. Choose the character sets you want:」で文字の種類を選択します。ここでも不要なものは選択しないようにします。フォントによって複数の character sets があるものや1つだけのものなど異なります。

英語アルファベットや記号の表示だけであれば「Latin (latin)」だけを選択します。

GoogleFonts_14

Google Fonts の読み込み

続いてその下の「3. Add this code to your website:」で表示されたコードをコピーします。コピーしたコード(ファイルの読み込み)は HTML の <head> 内にペーストします。

GoogleFonts_15

「@import」のタブをクリックすると、CSS で @import を使って読み込む記述が表示されます。

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

<head>
・・・中略・・・
<link href="http://fonts.googleapis.com/css?family=Petit+Formal+Script" rel="stylesheet" type="text/css" />
・・・中略・・・
</head>

Google Fonts の font-family の指定

「4. Integrate the fonts into your CSS:」で表示されるコードをコピーします。コピーしたコード(font-family の指定)を CSS の任意のセレクタに設定します。

GoogleFonts_16

h1 {
  font-family: "Petit Formal Script", sans-serif;
  -webkit-font-smoothing: antialiased;  /* 必要に応じて指定 */ 
}

上記のように記述すると h1 要素は、選択した Google Fonts によって表示されます。

<h1>Web Design Leaves</h1>

「-webkit-font-smoothing: antialiased;」はフォントの種類によっては、特定のブラウザ(Safari)でもっさりした感じに表示されてしまう場合があるので、その対策です。

関連ページ:「Safari のフォントを調整する

Google Fonts のダウンロード

Photoshop などで Google Fonts を利用したい場合などダウンロードするには、まずフォントを選択(Add to Collection をクリック)してコレクションに追加します。そして右上のダウンロードアイコンをクリックします。

GoogleFonts_17

GoogleFonts_18

「Download the font families in your Collection as a .zip file」の「.zip file」の部分をクリックするとダウンロードされます。

GoogleFonts_19

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

GoogleFonts_20

GoogleFonts_21

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

GoogleFonts_22

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