Google Fonts APIの入門 | Google Fonts和訳 [Web・開発]

この記事は、Google Fontsに関する記事を和訳したものです。
原文: Get Started with the Google Fonts API
元記事のライセンスは CC-BYで、この和訳記事のライセンスは CC-BYです。
自己責任でご利用ください。
和訳した時期は 2017年3月ころです。

このガイドでは、あなたのウェブページにフォントを追加するために、Google Fonts APIを使用する方法について説明しています。プログラミングをする必要はありません; しなければならないことのすべては、あなたの HTMLドキュメントに特別なスタイルシートのリンクを追加し、それから、CSSスタイルにてフォントを参照するだけです。

簡単な例

ここに例があります。次の HTMLを、ファイルにコピーしペーストします:

<html>
  <head>
    <link rel="stylesheet" type="text/css"
          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と呼ばれるフォントにて、ページ表示が表示されるはずです:

Making the Web Beautiful!

その文章は普通のテキストなので、CSSを使用することによって見た目を変更することができます。前の例のスタイルに影を追加してみます:

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

今、テキストの下にドロップシャドウが表示されるはずです:

Making the Web Beautiful!

そして、それは、Fonts APIおよび CSSを用いてできることのほんの始まりに過ぎません。

概要

次の 2つの手順にて、Google Fonts APIを使用し始めることができます:

希望のウェブフォントをリクエストするために、スタイルシートのリンクを追加します: Add a stylesheet link to request the desired web font(s):
```
<link rel="stylesheet" type="text/css"
      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内のフォントリストを参照してください。

リクエストしたそれぞれのスタイルのために、フルネームあるいは省略形のいずれかを与えることができます; ウエイトの場合、代わりに、数値ウエイトを指定することができます: For each style you request, you can give either the full name or an abbreviation; for weights, you can alternatively specify a numerical weight:

スタイル	指定子
italic	`italic`あるいは `i`
bold	`bold`あるいは `b`、あるいは 700といった数値ウエイト
bold italic	`bolditalic`あるいは `bi`

例えば、Cantarell italicおよび Droid Serif boldをリクエストするには、次の 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

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

Google Font Directoryのフォントの幾つかは、複数のスクリプトをサポートしています(例えば、Latin、Cyrillic、Greekというような)。どのサブセットがダウンロードされる必要があるかを指定するために、サブセットパラメータが URLに追加される必要があります。

例えば、Roboto Monoフォントの Cyrillicサブセットをリクエストするには、URLは次のようになるでしょう:

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

例えば、Roboto Monoフォントの Greekサブセットをリクエストするには、URLは次のようになるでしょう:

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

例えば、Roboto Monoフォントの Greekおよび Cyrillicの両方のサブセットをリクエストするには、URLは次のようになるでしょう:

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

Latinサブセットは、利用可能な場合には常に含まれており、指定される必要はありません。クライアントブラウザが Unicodeの範囲(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文字を指定できるようにします。例えば、¡Hola! は、次のように表されます:

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

フォントエフェクトを有効にする(ベータ版)

あなたのウェブサイト上でヘッダを作成する、あるいはテキストを表示するとき、しばしば、装飾的な方法にてあなたのテキストをスタイリングしたいでしょう。あなたの作業を簡単にするために、Googleは、美しい表示テキストを生産するために最小限の労力で使用することができるフォントエフェクトのコレクションを提供しています。例えば:

This is a font effect!

この新しいベータ機能を使用するには、単に、あなたの 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名	クラス名	サポート
Anaglyph	`anaglyph`	`font-effect-anaglyph`	Chrome, Firefox, Opera, Safari
Brick Sign	`brick-sign`	`font-effect-brick-sign`	Chrome, Safari
Canvas Print	`canvas-print`	`font-effect-canvas-print`	Chrome, Safari
Crackle	`crackle`	`font-effect-crackle`	Chrome, Safari
Decaying	`decaying`	`font-effect-decaying`	Chrome, Safari
Destruction	`destruction`	`font-effect-destruction`	Chrome, Safari
Distressed	`distressed`	`font-effect-distressed`	Chrome, Safari
Distressed Wood	`distressed-wood`	`font-effect-distressed-wood`	Chrome, Safari
Emboss	`emboss`	`font-effect-emboss`	Chrome, Firefox, Opera, Safari
Fire	`fire`	`font-effect-fire`	Chrome, Firefox, Opera, Safari
Fire Animation	`fire-animation`	`font-effect-fire-animation`	Chrome, Firefox, Opera, Safari
Fragile	`fragile`	`font-effect-fragile`	Chrome, Safari
Grass	`grass`	`font-effect-grass`	Chrome, Safari
Ice	`ice`	`font-effect-ice`	Chrome, Safari
Mitosis	`mitosis`	`font-effect-mitosis`	Chrome, Safari
Neon	`neon`	`font-effect-neon`	Chrome, Firefox, Opera, Safari
Outline	`outline`	`font-effect-outline`	Chrome, Firefox, Opera, Safari
Putting Green	`putting-green`	`font-effect-putting-green`	Chrome, Safari
Scuffed Steel	`scuffed-steel`	`font-effect-scuffed-steel`	Chrome, Safari
Shadow Multiple	`shadow-multiple`	`font-effect-shadow-multiple`	Chrome, Firefox, Opera, Safari
Splintered	`splintered`	`font-effect-splintered`	Chrome, Safari
Static	`static`	`font-effect-static`	Chrome, Safari
Stonewash	`stonewash`	`font-effect-stonewash`	Chrome, Safari
Three Dimensional	`3d`	`font-effect-3d`	Chrome, Firefox, Opera, Safari
Three Dimensional Float	`3d-float`	`font-effect-3d-float`	Chrome, Firefox, Opera, Safari
Vintage	`vintage`	`font-effect-vintage`	Chrome, Safari
Wallpaper	`wallpaper`	`font-effect-wallpaper`	Chrome, Safari

あなたのフォントをスタイリングするためのより多くの方法がありますが、多くのことは CSSを介して可能です。私たちは、単に、あなたが始めるための少しのアイデアを提供しています。より多くのアイデアを得るには、Google検索 "css text effects" を試み、ウェブ上に既にある多くのアイデアを参照してください!

参考文献

Google Fonts APIによって提供されるフォントファミリーの完全なリストについては、Google Fontsを参照してください。
フォントを読み込みをより制御するには、Web Font Loaderを使用する方法を学びます。
Google Fonts APIの動作の詳細については、技術的な考慮事項をご覧ください。