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

CSS API の更新

v2 API のアップデートにより、Google Fonts は可変フォントに完全に対応しました。Google では、単一および複数のフォントファミリーを呼び出す方法と、フォントファミリーを指定する軸の範囲です。可変フォントの詳細については、こちらのインタラクティブなイラストのパンフレット David Berlow 氏です。

クイックスタートガイド

次の 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>

ブラウザでファイルを開くと、ページには「 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>

ブラウザを使用してファイルを開くと、ページに「Making the Web Beautiful」というテキストがまず Crimson Pro で、次に Literata でレンダリングされます。

美しいウェブの実現

軸の範囲

可変フォントでは、スタイルの範囲が連続的になり、多くの場合、追加は不要レイテンシを短縮できます。これはレスポンシブデザインに関連しています。このダイナミックタイポグラフィでは、スタイルの範囲が連続しており、ページ上には 100 ～ 900 の重みがあり、それに応じて重みを変化させる予測します

可変フォント軸の範囲をリクエストするには、2 つの値を .. で結合します

フォント	リクエストする
クリムゾンプロ [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900`
クリムゾンプロイタリック [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900`
Crimson Pro ボールドイタリック[`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700`

お使いのブラウザでは可変フォント（caniuse）がサポートされていないようです。フォントバリエーションがサポートされているブラウザでは、次のテキストが表示されます。 400 から 500 までのスムーズなウェイトのセットとしての Crimson Pro。CSS アニメーションを使用すると、操作時にテキストのスタイルが滑らかに変化します

ブラウザが可変フォント（caniuse）に完全に対応している場合、次のテキストでは、Crimson Pro がスムーズな重みのセットとしてレンダリングされます。 400 ～ 500CSS アニメーションを使用すると、操作時にテキストのスタイルをスムーズに変化させることができます。

美しいウェブの実現

太さなどの個別のスタイル

スタイルを指定しないと、API により、。特定の太さなど、他のスタイルをリクエストするには、フォントファミリー名の後にコロン（:）を追加し、その後に軸のリストアルファベット順のプロパティキーワード、アットマーク（@）、1 つ以上のリスト値の集合体になります。

こちらの例で実際の例を示します。

フォント	リクエストする
Crimson Pro（デフォルト）	`https://fonts.googleapis.com/css2?family=Crimson+Pro`
クリムゾンプロ（ボールド）	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700`
Crimson Pro Regular および太字	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700`
Crimson Pro Bold太字斜体	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700`

Google Fonts には、各フォントファミリーで使用可能なすべてのスタイルが一覧表示されます。

デフォルトのスタイル

リクエストで軸の位置または範囲が指定されていない場合、 position が使用されます。斜体のデフォルトの位置は 0（標準）で、重み軸のデフォルト値は 400（標準）です。

ファミリーの軸にデフォルトの位置が含まれていない場合は、これらの軸の位置を指定しないと、失敗します。たとえば、サービスアカウントをファミリーの重み軸が 500 から 900 の範囲である場合、重みの位置はあります。

標準以外の重み

静的フォントの場合、太さのスタイルは通常 100 の倍数で指定します。（例: 300、400、700）。可変フォントでは標準の太さと中間の重みです。中間の重みをレンダリングするには:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450

お使いのブラウザでは可変フォントがサポートされていないようです（caniuse）。ブラウザの場合フォントバリエーションをサポートしている場合、次のテキストはクリムゾンをレンダリングする必要があります。 400、450、500 の視覚的に異なる重みの Pro。

ブラウザが可変フォントに完全に対応している場合（caniuse）、次のテキストでは、Crimson Pro を視覚的に区別できる 400 の太さでレンダリングします。 450、500 などです

美しいウェブの実現

レイテンシとファイルサイズの最適化

使用するスタイルを正確に指定してください。API がリクエストされたスタイルを提供する最もコンパクトなフォントセットで表示できるようになります使用されないスタイルをリクエストするとフォントデータが必要以上にダウンロードされ、レイテンシが増加します。 3 つの特定の太さがある場合は、リクエストで個別のスタイルとして指定します。もし連続した範囲の重みを使用する場合は、リクエストでその重み範囲を指定します。

font-display を使用する

font-display プロパティを使用して、フォントの読み込み中または他の方法では得られませんデフォルトの auto 以外の値を指定すると、通常は適切です

display パラメータに目的の値を渡します。

https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap

フォントリクエストの最適化

サイトやアプリでウェブフォントを使用したい場合、必要な文字をあらかじめ知らせておく必要があります。この問題は、使用しないでください。

この場合は、フォントで text= 値を指定することを検討してください。リクエスト URL を入力します。これにより、Google Fonts がユーザーの環境に合わせて最適化されたフォントファイルを表示されます。これにより、フォントファイルのサイズを最大で 90%。

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

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

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

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

この機能はインターナショナルフォントにも適用でき、UTF-8 を指定できます。あります。たとえば、¡Hola! は次のように表されます。

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

「text=」はパラメータは 1 回しか指定できません。適用されるリクエストに含まれるすべてのファミリーに公開されます。必要な場合は、個別の API リクエストを使用してください。複数のファミリー間でテキストを最適化できます。

API URL の作成

厳格性

一般に、更新された CSS API では、リクエストの内容が許可するプロパティを指定します。

全般的なガイドライン:

軸をアルファベット順に一覧表示（en-US 言語 / 地域）
軸の値グループ（タプル）は数値で並べ替える必要があります
タプルは重ねたりタップしたりできません（例: wght 400..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 でブラウザの可変フォントのサポート状況を確認します。

プログレッシブエンハンスメントを実践することで、そうした古いブラウザでの予期しない動作を回避できます。@supports を使用する使用して可変フォント機能を制御できます。

この例では、Markazi Text の重み 450 を使用しますが、可変の場合、レギュラー（ウェイト 400）またはミディアム（ウェイト 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 を送信します。調整できます。一般的に、リクエストの範囲に関する代替は、従来のブラウザで使用できます。

軸	フォールバック
`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 で使用可能な可変フォントの表については、こちらをご覧ください。

CSS API の更新

最新情報

クイックスタートガイド

複数家族

軸の範囲

太さなどの個別のスタイル

デフォルトのスタイル

標準以外の重み

レイテンシとファイルサイズの最適化

font-display を使用する

フォントリクエストの最適化

API URL の作成

厳格性

API URL の仕様

従来のブラウザのサポート

使用可能な可変フォント

関連情報

CSS API の更新

最新情報

クイックスタート ガイド

複数家族

軸の範囲

太さなどの個別のスタイル

デフォルトのスタイル

標準以外の重み

レイテンシとファイルサイズの最適化

font-display を使用する

フォント リクエストの最適化

API URL の作成

厳格性

API URL の仕様

従来のブラウザのサポート

使用可能な可変フォント

関連情報

クイックスタートガイド

フォントリクエストの最適化