このガイドでは、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 の仕組みについて詳しくは、技術的な考慮事項のページをご覧ください。