v2 API の更新で、Google Fonts で可変フォントが完全にサポートされるようになりました。単一および複数のフォント ファミリーを呼び出す方法と、軸の範囲を指定する方法について説明します。可変フォントの詳細については、TypeNetwork の David Berlow によるインタラクティブにイラスト化されたパンフレットをご覧ください。
新機能
すべて新しいベース URL で始まります。
https://fonts.googleapis.com/css2
各ファミリー内のスタイルを指定する構文が、可変フォントの「デザイン スペース」を記述するように変更されました。
クイックスタート ガイド
次の HTML をコピーしてファイルに貼り付けます。
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
ブラウザを使ってファイルを開くと、Crison Pro のフォントで「Making the Web Beautiful（ウェブを美しく）」というページがレンダリングされます。
複数のファミリー
複数のファミリーをリクエストするには、ファミリーごとに family= パラメータを指定します。
たとえば、フォント Crimson Pro と Literata をリクエストするには、次のようにします。
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
次の HTML をコピーしてファイルに貼り付けます。
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
<style>
body {
font-size: 48px;
}
div:nth-child(1) {
font-family: 'Crimson Pro', serif;
}
div:nth-child(2) {
font-family: 'Literata’, serif;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
<div>Making the Web Beautiful!</div>
</body>
</html>
ブラウザを使ってファイルを開くと、ページに「Make the Web Beautiful（ウェブを美しく）」というレンダリングを行う必要があります。まず Crimson Pro が書き、次に Literata でレンダリングします。
軸の範囲
可変フォントを使用すると、多くの場合、追加のレイテンシなしで、連続したスタイル範囲が提供されます。これはレスポンシブ デザインに関連するものです。 この動的なタイポグラフィは、スタイルを連続して使用するとともに、100 ～ 900 の太さをページ全体に用意し、特定の条件に基づいて重み付けを変化させます。
可変フォントの軸の範囲をリクエストするには、.. と 2 つの値を結合します。
| フォント | リクエスト |
|---|---|
Crimson Pro [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Crimson Pro 斜体 [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Crimson Pro Bold イタリック & [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
個別のスタイル（ウェイトなど）
スタイル指定がない場合、API はリクエストされたファミリーのデフォルト スタイルを提供します。特定の太さなどの他の個々のスタイルをリクエストするには、フォント ファミリーの名前の後にコロン（:）を追加し、その後にアルファベット順の軸プロパティ キーワードのリスト（アットマーク（@））とそれらの軸プロパティの値のリストを 1 つ以上追加します。
実際の例を見てみましょう。
| フォント | リクエスト |
|---|---|
| Crimson Pro（デフォルト） | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Crimson Pro Bold | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| Crimson Pro 標準 &Bold | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| Crimson Pro Bold & Bold Italic | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts には、各フォント ファミリーで使用可能なすべてのスタイルが一覧表示されます。
デフォルトのスタイル
リクエストで軸の位置または範囲が指定されていない場合は、デフォルトの位置が使用されます。斜体軸のデフォルトの位置は 0（標準）で、重み軸のデフォルト位置は 400（標準）です。
デフォルトの位置を持たない軸を持つファミリーの場合、それらの軸の位置を指定していないリクエストは失敗します。たとえば、重み軸が 500 ～ 900 のファミリーをリクエストする場合は、重み位置を指定する必要があります。
非標準のウェイト
静的フォントの場合、太さは通常、100 の倍数（300、400、700 など）で指定します。可変フォントは標準ウェイトと中間ウェイトの両方を提供します。中間の重みをレンダリングするには:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
レイテンシとファイルサイズの最適化
使用するスタイルは正確に指定します。API は、リクエストされたスタイルを最もコンパクトなフォントのセットで提供します。未使用のスタイルをリクエストすると、ユーザーが必要以上にフォントデータをダウンロードしてしまう可能性があります。特定の重みを 3 つのみ使用する場合は、リクエストで個々のスタイルとして指定します。重みの連続範囲を使用する場合は、リクエストでその重み範囲を指定します。
フォント ディスプレイを使用する
font-display プロパティを使用すると、フォントの読み込み中や使用不可の状態の動作を制御できます。通常は、デフォルトの auto 以外の値を指定することをおすすめします。
目的の値を display パラメータに渡します。
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
フォント リクエストの最適化
サイトまたはアプリケーションでウェブフォントを使用するときには、必要な文字があらかじめ決まっています。これは、ロゴや見出しでウェブフォントを使用している場合に発生します。
その場合は、フォント リクエスト URL に text= 値を指定することを検討してください。これにより、Google Fonts でリクエストに最適化されたフォント ファイルを返すことができます。これにより、フォントファイルのサイズが最大 90% 削減される場合があります。
この機能を使用するには、text= を API リクエストに追加します。たとえば、ブログのタイトルに Inconsolata のみを使用している場合は、タイトル自体を text= の値として指定できます。リクエストは次のようになります。
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
すべてのクエリ文字列と同様に、値を URL エンコードする必要があります。
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
この機能は国際フォントでも利用でき、UTF-8 文字を指定できます。たとえば、orHola! は次のように表されます。
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
text=' パラメータを指定できるのは 1 回のみです。これは、リクエスト内のすべてのファミリーに適用されます。複数のファミリーで同じテキスト最適化が必要な場合は、個別の API リクエストを使用してください。
API URL の設定
厳格性
更新された CSS API では、元の CSS API よりも、どのようなリクエストを受け付けるかが厳重になります。
一般的なガイドライン:
- 軸をアルファベット順で一覧表示する（
en-USロケール） - 軸の値グループ（タプル）は数値で並べ替える必要がある
- タプルは重複することも、タップすることもできません（例:
wght400.500、500.600）。
API URL の仕様
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name: フォント ファミリーの名前
axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis: 軸タグ（例: ital、wdth、wght）
axis_tuple_list: <axis_tuple>[;<axis_tuple>...]
axis_tuple: <value>[,<value>...] // Same length as axis_tag_list
value: <range> | <float>
range: <float>..<float>
float: 対応する軸の範囲内の値
text: リクエストされた書体に表示されるテキスト
display: auto | block | swap | fallback | optional
従来のブラウザのサポート
可変フォントに対応していないブラウザでは、デザインを想定どおりに表示できない場合があります。caniuse でブラウザの可変フォントのサポートを確認します。
プログレッシブ エンハンスメントを実施すると、古いブラウザで予期しない動作を回避できます。可変フォント機能を制御するには、CSS で @supports クエリを使用します。
この例では、Markazi Text の weight 450 を使用しますが、可変フォント機能がサポートされていない場合は Regular（weight 400）または Medium（weight 500）にフォールバックする必要があります。
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
CSS リクエスト Markazi+Text:wght@450 は、可変フォントをサポートするクライアントにはウェイト 450 を、サポートしないクライアントにはウェイト 400 および 500 を送信します。一般的に、リクエストの範囲に関するフォールバックは従来のブラウザで利用できます。
| 軸 | フォールバック |
|---|---|
ital |
0、1 |
wght |
100、200、300、400、500、600、700、800、900 |
以下の例は、従来のブラウザで、いくつかの異なるリクエストに使用できるスタイルを示しています。
| リクエスト | 従来のブラウザで使用できるスタイル |
|---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
利用可能な可変フォント
v2 API で使用可能な可変フォントの表はこちらで確認できます。
参考資料
- Google Fonts API が提供するフォント ファミリーの一覧については、Google Fonts をご覧ください。
- Google Fonts API の仕組みについて詳しくは、技術的な考慮事項のページをご覧ください。