このページは Cloud Translation API によって翻訳されました。

Google Fonts API を使ってみる

このガイドでは、Google Fonts API を使用してウェブページにフォントを追加する方法について説明します。プログラミングは不要です。HTML ドキュメントに特別なスタイルシートリンクを追加して、CSS スタイルでフォントを参照するだけです。

簡単な例

たとえば、次の HTML をコピーしてファイルに貼り付けます。

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

最新のウェブブラウザでファイルを開きます。次のような Tangerine フォントでページが表示されます。

ウェブを美しくする

この文章は普通のテキストなので、CSS を使用して見た目を変更できます。前の例のスタイルにシャドウを追加してみましょう。

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

テキストの下にドロップシャドウが表示されます。

ウェブを美しくする

これは、Fonts API と CSS でできることのほんの始まりにすぎません。

概要

Google Fonts API は、次の 2 つのステップで使い始めることができます。

スタイルシートのリンクを追加して、目的のウェブフォントをリクエストします。
```
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">
```
リクエストされたウェブフォントを使用して、スタイルシートで要素のスタイルを設定します。
```
.css-selector {
font-family: 'Font Name', serif;
}
```
または、要素自体にインラインスタイルを使用:
```
<div style="font-family: 'Font Name', serif;">Your text</div>
```

使用できるフォントの一覧については、Google Fonts をご覧ください。

スタイルシートの URL でフォントファミリーとフォントスタイルを指定する

スタイルシートのリンクで使用する URL を決定するには、Google Fonts API のベース URL から始めます。

https://fonts.googleapis.com/css

次に、family= URL パラメータを追加し、1 つ以上のフォントファミリー名とフォントスタイルを指定します。

たとえば、Inconsolata フォントをリクエストするには、次のようにします。

https://fonts.googleapis.com/css?family=Inconsolata

複数のフォントファミリーをリクエストするには、名前をパイプ文字（|）で区切ります。

たとえば、フォント Tangerine、Inconsolata、Droid Sans をリクエストするには、次のようにします。

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

複数のフォントをリクエストすると、それらのフォントをページ内ですべて使用できます。（ただし、過度に使用しないでください。ほとんどのページはそれほど多くのフォントを必要としません。大量のフォントをリクエストすると、ページの読み込みが遅くなることがあります）。

Google Fonts API では、リクエストされたフォントの通常バージョンがデフォルトで提供されます。他のスタイルや太さをリクエストするには、フォント名にコロン（:）を追加し、その後にスタイルまたは太さをカンマ（,）で区切ったリストを指定します。

例:

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

特定のフォントで使用できるスタイルと太さを確認するには、Google Fonts にあるフォントのリストをご覧ください。

リクエストするスタイルごとに、フルネームまたは略語を指定できます。重みの場合は、代わりに数値の重みを指定することもできます。

スタイル	指定子
斜体	`italic` または `i`
太字	`bold`、`b`、または数値による重み付け（700 など）
太字斜体	`bolditalic` または `bi`

たとえば、Cantarell 斜体と Droid Serif 太字をリクエストするには、次のいずれかの URL を使用します。

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

font-display を使用する

font-display を使用すると、フォントが利用できない場合の動作を制御できます。通常は、デフォルトの auto 以外の値を指定することをおすすめします。

目的の値をクエリ文字列 display パラメータに渡します。

https://fonts.googleapis.com/css?family=Roboto&display=swap

スクリプトのサブセットの指定

Google Font Directory の一部のフォントは複数の文字（ラテン文字、キリル文字、ギリシャ文字など）をサポートしています。ダウンロードする必要があるサブセットを指定するには、サブセットパラメータを URL に追加する必要があります。

たとえば、Roboto Mono フォントのキリル文字サブセットをリクエストするには、URL は次のようになります。

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Roboto Mono フォントのギリシャ語サブセットをリクエストするには、URL は次のようになります。

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

Roboto Mono フォントのギリシャ文字とキリル文字の両方のサブセットをリクエストするには、URL は次のようになります。

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

ラテンサブセットが利用可能であれば常に含まれ、指定する必要はありません。クライアントブラウザが unicode-range（http://caniuse.com/#feat=font-unicode-range）をサポートしている場合、サブセットパラメータは無視されます。ブラウザは、フォントでサポートされているサブセットの中から、テキストのレンダリングに必要なものを取得します。

使用可能なフォントとフォントサブセットの一覧については、Google Fonts をご覧ください。

フォントリクエストを最適化する

多くの場合、ウェブサイトやアプリケーションでウェブフォントを使用する場合は、必要な文字を事前に把握しておく必要があります。これは、ロゴや見出しでウェブフォントを使用している場合によく発生します。

このような場合、フォントリクエスト URL で text= 値を指定することを検討してください。これにより、Google はリクエストに応じて最適化されたフォントファイルを返すことができます。フォントファイルのサイズを最大 90% 削減できる場合があります。

この機能を使用するには、Google Fonts API リクエストに text= を追加します。たとえば、ブログのタイトルにのみ Inconsolata を使用している場合は、タイトル自体を text= の値として指定できます。リクエストは次のようになります。

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

すべてのクエリ文字列と同様に、値を URL エンコードする必要があります。

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

この機能は、国際フォントでも機能し、UTF-8 文字を指定できます。たとえば、「ホーラ！」は以下のように表されます。

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

フォント効果の有効化（ベータ版）

ウェブサイトでヘッダーや表示テキストを作成する際、テキストを装飾的なスタイルにしたい場合があります。Google では、作業を簡略化するために、最小限の労力で美しい表示テキストを生成できるフォント効果のコレクションを提供しています。例:

これはフォント効果です。

このベータ版機能を使用するには、Google Fonts API リクエストに effect= を追加し、対応するクラス名を対象の HTML 要素に追加するだけです。上記の例では、shadow-multiple フォント効果を使用しているため、リクエストは次のようになります。

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

この効果を使用するには、対応するクラス名を HTML 要素に追加します。対応するクラス名は常に font-effect- の接頭辞が付いたエフェクト名であるため、shadow-multiple のクラス名は font-effect-shadow-multiple になります。

<div class="font-effect-shadow-multiple">This is a font effect!</div>

複数のエフェクトをリクエストするには、エフェクト名をパイプ文字（|）で区切ります。

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

以下に、利用できるすべてのフォント効果の一覧を示します。

影響	API 名	Class Name	サポート
アナグリフ	`anaglyph`	`font-effect-anaglyph`	Chrome、Firefox、Opera、Safari
レンガの標識	`brick-sign`	`font-effect-brick-sign`	Chrome、Safari
キャンバスプリント	`canvas-print`	`font-effect-canvas-print`	Chrome、Safari
クラックル	`crackle`	`font-effect-crackle`	Chrome、Safari
減衰	`decaying`	`font-effect-decaying`	Chrome、Safari
破壊	`destruction`	`font-effect-destruction`	Chrome、Safari
苦しそうな顔	`distressed`	`font-effect-distressed`	Chrome、Safari
荒れ処理した木材	`distressed-wood`	`font-effect-distressed-wood`	Chrome、Safari
エンボス	`emboss`	`font-effect-emboss`	Chrome、Firefox、Opera、Safari
火事	`fire`	`font-effect-fire`	Chrome、Firefox、Opera、Safari
火災アニメーション	`fire-animation`	`font-effect-fire-animation`	Chrome、Firefox、Opera、Safari
脆弱	`fragile`	`font-effect-fragile`	Chrome、Safari
草	`grass`	`font-effect-grass`	Chrome、Safari
氷	`ice`	`font-effect-ice`	Chrome、Safari
有糸分裂	`mitosis`	`font-effect-mitosis`	Chrome、Safari
ネオン	`neon`	`font-effect-neon`	Chrome、Firefox、Opera、Safari
アウトライン	`outline`	`font-effect-outline`	Chrome、Firefox、Opera、Safari
環境への配慮	`putting-green`	`font-effect-putting-green`	Chrome、Safari
スチール製	`scuffed-steel`	`font-effect-scuffed-steel`	Chrome、Safari
シャドウマルチプル	`shadow-multiple`	`font-effect-shadow-multiple`	Chrome、Firefox、Opera、Safari
スプリタド	`splintered`	`font-effect-splintered`	Chrome、Safari
静的	`static`	`font-effect-static`	Chrome、Safari
ストーンウォッシュ	`stonewash`	`font-effect-stonewash`	Chrome、Safari
3D	`3d`	`font-effect-3d`	Chrome、Firefox、Opera、Safari
3 次元の浮動小数	`3d-float`	`font-effect-3d-float`	Chrome、Firefox、Opera、Safari
ヴィンテージ	`vintage`	`font-effect-vintage`	Chrome、Safari
壁紙	`wallpaper`	`font-effect-wallpaper`	Chrome、Safari

フォントのスタイルを設定するには、その他にも多くの方法があります。また、CSS でさまざまなことができます。ここでは、キャンペーンを始めるためのアイデアをいくつか紹介します。その他のアイデアを得るには、Google で「CSS テキストエフェクト」を検索してみてください。また、ウェブ上ですでに公開されているさまざまなアイデアをご覧ください。

参考資料

Google Fonts API で提供されているフォントファミリーの一覧については、Google Fonts をご覧ください。
Web Font Loader を使用して、フォントの読み込みをより詳細に制御する方法を確認する。
Google Fonts API の仕組みについて詳しくは、技術的な考慮事項のページをご覧ください。