Aktualisierung der CSS API

Google Fonts unterstützt im V2 API-Update jetzt variable Schriftarten. Sie erfahren außerdem, wie Sie sowohl einzelne als auch mehrere Schriftfamilien aufrufen und Achsenbereiche angeben. Ausführliche Informationen zu variablen Schriftarten finden Sie in dieser interaktiven Broschüre von David Berlow bei TypeNetwork.

Das ist neu

Alles beginnt mit einer neuen Basis-URL:

https://fonts.googleapis.com/css2

Die Syntax für die Angabe von Stilen innerhalb jeder Familie hat sich geändert, um die variable Schriftgröße „Designbereiche“ zu beschreiben.

Kurzanleitungen

Kopieren Sie diesen HTML-Code und fügen Sie ihn in eine Datei ein:

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

Die Seite sollte in einem Browser mit dem Text „Make the Web Scenic“ (Web ansehen) in der Crimson Pro-Schriftart gerendert werden.

Das Web wunderschön gestalten!

Für mehrere Familien

Wenn Sie mehrere Familien anfordern möchten, geben Sie den Parameter family= für jede Familie an.

So fordern Sie beispielsweise die Schriftarten Crimson Pro und Literata an:

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

Kopieren Sie diesen HTML-Code und fügen Sie ihn in eine Datei ein:

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

Die Datei sollte in einem Browser geöffnet werden. Dabei sollte der Text „Making the Web Love“ zuerst in Crimson Pro und dann in Literata gerendert werden.

Das Web wunderschön gestalten!
Das Web wunderschön gestalten!

Achsenbereiche

Variablen Schriftarten bieten kontinuierliche Stilbereiche, oft ohne zusätzliche Latenz. Dies ist für das responsive Webdesign relevant. Bei dieser dynamischen Typografie werden kontinuierliche Stilbereiche verwendet, die alle Gewichtungen zwischen 100 und 900 auf einer Seite bieten. Die Gewichtung kann je nach Bedingungen dynamisch variieren.

Wenn Sie einen Bereich einer Schriftart mit Variablen anfordern möchten, verknüpfen Sie die beiden Werte mit ..

Schriftart(en) Anfrage
Crimson Pro [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900
Crimson Pro Kursiv [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900
Crimson Pro Bold Kursiv & [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700
Ihr Browser unterstützt offenbar keine Schriftarten (caniuse). In einem Browser, der Schriftartenvariationen unterstützt, sollte der folgende Text als flüssiger Satz von Gewichtungen zwischen 400 und 500 angezeigt werden. Mit CSS-Animationen kann der Text bei der Interaktion nahtlos variieren.
Wenn dein Browser die Variablenvariablen (caniuse) vollständig unterstützt, sollte Crimson Pro die gleichmäßige Gewichtung von 400 bis 500 rendern. Mit CSS-Animationen kann der Text bei der Interaktion nahtlos variieren.
Das Web wunderschön gestalten!
Das Web wunderschön gestalten!
Das Web wunderschön gestalten!
Das Web wunderschön gestalten!
Das Web wunderschön gestalten!
Das Web wunderschön gestalten!

Einzelne Stile, z. B. Gewicht

Ohne Formatspezifikationen stellt die API den Standardstil der angeforderten Familie bereit. Wenn Sie andere individuelle Stile anfordern möchten, z. B. bestimmte Gewichtungen, hängen Sie nach dem Namen der Schriftfamilie einen Doppelpunkt (:) gefolgt von einer Liste von alphabetischen Achsen-Property-Keywords, einem @-Zeichen und einer oder mehreren Listen mit Werten für diese Achseneigenschaften an.

Diese Beispiele zeigen diese Funktion in der Praxis.

Schriftart(en) Anfrage
Crimson Pro (Standard) https://fonts.googleapis.com/css2?family=Crimson+Pro
Purpurrot https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700
Crimson Pro Regular https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700
Purpurrot &fett; kursiv https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700

Bei Google Fonts werden alle für jede Schriftfamilie verfügbaren Stile aufgelistet.

Standardstil

Wenn in einer Anfrage keine Position oder ein Bereich für eine Achse angegeben ist, wird die Standardposition verwendet. Die Standardposition der kursiven Achse ist 0 (normal) und der Standardwert für die Gewichtungsachse beträgt 400 (regulär).

Bei Familien mit Achsen, die nicht die Standardposition enthalten, schlagen Anfragen fehl, für die keine Positionen für diese Achsen angegeben werden. Wenn Sie zum Beispiel eine Familie mit einer Gewichtungsachse anfordern, die zwischen 500 und 900 liegt, muss die Gewichtungsposition angegeben werden.

Nicht normgerechte Gewichtungen

Bei statischen Schriftarten werden Gewichtungen in der Regel als Vielfaches von 100 angegeben, z.B. 300, 400 oder 700. Variablenschriften bieten sowohl die Standardgewichtungen als auch die Zwischengewichtungen. So renderst du eine Zwischengewichtung:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Ihr Browser unterstützt offenbar keine Schriftarten (caniuse). In einem Browser, der Schriftartenvariationen unterstützt, sollte der folgende Text mit Crimson Pro mit einer optisch unterschiedlichen Gewichtung von 400, 450 und 500 gerendert werden.
Wenn dein Browser variable Schriftarten (caniuse) vollständig unterstützt, sollte Crimson Pro mit einer optisch unterschiedlichen Gewichtung von 400, 450 und 500 gerendert werden.
Das Web wunderschön gestalten!
Das Web wunderschön gestalten!
Das Web wunderschön gestalten!

Optimierung auf Latenz und Dateigröße

Machen Sie genaue Angaben zu den Stilen, die Sie verwenden. Die API stellt die angeforderten Stile in den kompaktsten Schriftarten bereit. Wenn Sie nicht verwendete Stile anfordern, können Ihre Nutzer mehr Schriftarten als nötig herunterladen, was zu einer höheren Latenz führt. Wenn Sie nur drei bestimmte Gewichtungen verwenden, geben Sie diese in Ihrer Anfrage als einzelne Stile an. Wenn Sie einen kontinuierlichen Gewichtsbereich verwenden, geben Sie diesen Gewichtungsbereich in der Anfrage an.

Schriftart im Display verwenden

Mit dem Attribut font-display kannst du festlegen, was passiert, während die Schriftart geladen wird oder aus anderen Gründen nicht verfügbar ist. In der Regel ist es sinnvoll, einen anderen Wert als den Standardwert für auto anzugeben.

Übergeben Sie den gewünschten Wert im Parameter display:

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

Schriftartanfragen optimieren

Wenn du eine Webschriftart auf deiner Website oder in deiner Anwendung verwenden möchtest, weißt du im Voraus, welche Buchstaben du benötigst. Dieser Fehler tritt häufig auf, wenn Sie eine Webschriftart in einem Logo oder einer Überschrift verwenden.

In diesen Fällen solltest du in der URL der Schriftartanfrage einen text=-Wert angeben. Dadurch kann Google Fonts eine Schriftartdatei zurückgeben, die für deine Anfrage optimiert wurde. Dadurch kann die Größe der Schriftartdatei in manchen Fällen um bis zu 90 % reduziert werden.

Fügen Sie Ihrer API-Anfrage einfach text= hinzu, um diese Funktion zu verwenden. Wenn du beispielsweise Inconsolata nur für den Titel deines Blogs verwendest, kannst du den Titel selbst als Wert für text= festlegen. Die Anfrage sieht dann folgendermaßen aus:

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

Wie bei allen Abfragestrings sollten Sie den Wert per URL codieren:

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

Dieses Feature funktioniert auch für internationale Schriftarten, bei denen du UTF-8-Zeichen angeben kannst. ¡Hola! wird beispielsweise so dargestellt:

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

API-URLs erstellen

Strikt

Allgemein gilt: Die aktualisierte CSS API ist strenger im Hinblick darauf, welche Anfragen akzeptiert werden als die ursprüngliche CSS API.

Allgemeine Richtlinien:

  • Achsen alphabetisch auflisten
  • Achsenwertgruppen (d.h. Semikolons) müssen numerisch sortiert werden
  • Tuples dürfen sich nicht überschneiden oder berühren (z.B. wght 400..500 und 500..600)

API-URL-Spezifikation

/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]

spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]

family_name: Name der Schriftfamilie

axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically

axis: Ein Achsen-Tag, z.B. 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: Ein Wert innerhalb des Bereichs der entsprechenden Achse

text: Der Text, der in der angeforderten Schriftart angezeigt wird.

display: auto | block | swap | fallback | optional

Unterstützung für Legacy-Browser

Browser, bei denen die Schriftart nicht variabel ist, können möglicherweise nicht wie vorgesehen dargestellt werden. Prüfen Sie, ob in Browser die variable Schriftfunktion von Caniuse unterstützt wird.

Durch progressive Verbesserungen kannst du unerwartetes Verhalten in diesen älteren Browsern vermeiden. Verwenden Sie @supports-Abfragen in Ihrem CSS, um die Schriftarten von Variablen zu steuern.

In diesem Beispiel möchten wir die Gewichtung 450 von Markazi-Text verwenden, müssen aber auf die Werte „Normal“ (400) oder „Medium“ (500) zurückgreifen, wenn die folgenden Funktionen von Variablen unterstützt werden:

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

Die CSS-Anfrage Markazi+Text:wght@450 sendet die Gewichtung 450 an Clients, die variable Schriftarten unterstützen. Die Gewichtungen 400 und 500 unterstützen jene, die dies nicht tun. In der Regel sind die Fallbacks für den Bereich Ihrer Anfrage in älteren Browsern verfügbar.

Achse Fallbacks
Italien 0, 1
wght 100, 200, 300, 400, 500, 600, 700, 800, 900

Diese Beispiele zeigen, welche Stile für ältere Browser für einige verschiedene Anfragen verfügbar wären.

Anfrage Stile in älteren Browsern
italien@0 italien@0
wght@500 wght@500
wght@432 wght@400;500
wght@440–560 wght@400;500;600

Verfügbare Variablenschriftarten

Eine Tabelle der in der API v2 verfügbaren Variablenvariablen finden Sie hier.

Weitere Informationen

  • Eine vollständige Liste der von der Google Fonts API bereitgestellten Schriftfamilien finden Sie unter Google Fonts.
  • Weitere Informationen zur Funktionsweise der Google Fonts API finden Sie auf der Seite Technische Überlegungen.