このガイドでは、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 でできることのほんの一部にすぎません。
概要
次の 2 つの手順で Google Fonts API の利用を開始できます。
必要なウェブフォントをリクエストするためのスタイルシートのリンクを追加します。
<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 を決定するには、最初に Fonts API のベース URL:
https://fonts.googleapis.com/css
次に、family= URL パラメータを追加し、1 つ以上のフォント ファミリー名と
あります。
たとえば、 Inconsolata フォント:
https://fonts.googleapis.com/css?family=Inconsolata
複数のフォント ファミリーをリクエストするには、名前をパイプ文字で区切ります
（|）。
たとえば、リクエストに対して タンジェリン 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 の太字をリクエストするには、任意の 必要があります。
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 に登録されています 複数の文字体系（ラテン文字、キリル文字、ギリシャ文字など）に対応している。順序 ダウンロードするサブセットを指定します。 を追加します。
たとえば、名前のキリル文字のサブセットを 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。
フォント リクエストの最適化
ウェブサイトやアプリケーションでウェブフォントを使用したい場合、 必要な文字をあらかじめ知らせておく必要があります。この問題は、 使用しないでください。
この場合は、フォントで text= 値を指定することを検討してください。
リクエスト URL を入力します。そうすると 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 は 最小限の労力で使用できるフォント効果を集めました 美しいテキストが生成されます。例:
effect= を Google Fonts に追加するだけで、ベータ版の機能を利用できます
API リクエストを作成し、対応するクラス名を、API 呼び出しを行う 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
以下に、Google が提供するすべてのフォント効果の一覧を示します。
| 効果 | API 名 | クラス名 | サポート |
|---|---|---|---|
| アナグリフ | 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 | 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 | stonewash |
font-effect-stonewash |
Chrome、Safari |
| 3 次元 | 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 |
フォントのスタイル設定方法は他にも多数あり、さまざまな方法で 実装しますここでは、ご利用を開始するにあたって役立つアイデアをいくつかご紹介します。詳細 Google 検索をお試しください 「CSS テキスト効果」および ウェブ上に公開されているさまざまなアイデアをご覧ください。
関連情報
- Google Fonts API が提供しているフォント ファミリーの一覧については、 Google Fonts。
- 詳しくは、ウェブフォント ローダを使って フォントの読み込みをより細かく制御できるようになります。
- 詳しくは、Google Fonts API が 技術的な考慮事項ページ。