Aktualisierung der CSS API

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Google Fonts unterstützt jetzt Version 2 des APIs API-Updates die Verwendung von variablen Schriftarten. Wir erläutern, 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.

Neue Funktionen

Alles beginnt mit einer neuen Basis-URL:

https://fonts.googleapis.com/css2

Die Syntax zur Angabe von Stilen innerhalb einer Familie wurde 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>

Wenn die Datei in einem Browser geöffnet werden soll, sollte der Text in der Schriftart „Curmson Pro“ den Text „Making the Web Beautiful“ enthalten.

Das Web noch schöner machen

Mehrere Familien

Wenn Sie mehrere Familien anfordern möchten, geben Sie für jede Familie den Parameter family= 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>

Wenn Sie die Datei in einem Browser öffnen möchten, sollte die Seite den Text „Make the Web Beautiful“ enthalten, zuerst in Crimson Pro und dann in Literata.

Das Web noch schöner machen
Das Web noch schöner machen

Achsenbereiche

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

Wenn Sie einen Bereich einer Variablenachsenachse anfordern möchten, führen Sie die beiden Werte mit .. zusammen

Schriftart(en) Anfragen
Rubinrot Pro [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900
Rot, kursiv [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900
Rot, kursiv und fett; [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 Schriftvariationen unterstützt, sollte der folgende Text Crimson Pro als glatten Gewichtungen zwischen 400 und 500 rendern. Mit CSS-Animationen kann der Text bei der Interaktion gleichmäßig variieren.
Wenn dein Browser variable Schriftarten (caniuse) vollständig unterstützt, sollte der folgende Text Crimson Pro als glatten Gewichtungen von 400 bis 500 rendern. Mit CSS-Animationen kann der Text bei der Interaktion gleichmäßig variieren.
Das Web noch schöner machen
Das Web noch schöner machen
Das Web noch schöner machen
Das Web noch schöner machen
Das Web noch schöner machen
Das Web noch schöner machen

Individuelle Stile, z. B. Gewicht

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

Diese Beispiele zeigen dies in der Praxis.

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

Unter Google Fonts sind alle für jede Schriftfamilie verfügbaren Stile aufgeführt.

Standardstil

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

Bei Familien mit Achsen, die nicht die Standardposition enthalten, schlagen Anfragen ohne angegebene Position für diese Achsen fehl. Wenn Sie beispielsweise eine Familie mit einer Gewichtsachse von 500 bis 900 anfordern, muss die Gewichtsposition angegeben werden.

Nicht standardmäßige Gewichtungen

Bei statischen Schriftarten werden die Gewichtungen in der Regel als ein Vielfaches von 100 angegeben (z.B. 300, 400, 700). Variablenschriftarten bieten sowohl Standard- als auch Zwischengewichtungen. So rendern Sie ein Zwischengewicht:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Ihr Browser unterstützt offenbar keine Schriftarten (caniuse). In einem Browser, der Schriftvarianten unterstützt, sollte der folgende Text Crimson Pro mit visuell unterschiedlichen Gewichtungen von 400, 450 und 500 rendern.
Wenn dein Browser variable Schriftarten (caniuse) vollständig unterstützt, sollte der folgende Text Crimson Pro mit visuell unterschiedlichen Gewichtungen von 400, 450 und 500 rendern.
Das Web noch schöner machen
Das Web noch schöner machen
Das Web noch schöner machen

Latenz und Dateigröße optimieren

Machen Sie genaue Angaben zu den verwendeten Stilen. Die API stellt die angeforderten Stile in den kompaktsten Schriftarten bereit. Das Anfordern nicht verwendeter Stile kann dazu führen, dass Nutzer mehr Schriftartendaten herunterladen, als sie benötigen, was die Latenz erhöht. Wenn Sie nur drei bestimmte Gewichtungen verwenden, geben Sie diese in Ihrer Anfrage als einzelne Stile an. Wenn Sie einen kontinuierlichen Gewichtungsbereich verwenden, geben Sie diesen in Ihrer Anfrage an.

Schriftart verwenden

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

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

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

Schriftartenanfragen optimieren

Wenn Sie eine Webschriftart auf Ihrer Website oder in Ihrer Anwendung verwenden möchten, wissen Sie oft im Voraus, welche Buchstaben Sie benötigen. Das passiert häufig, wenn Sie eine Webschriftart in einem Logo oder einer Überschrift verwenden.

In diesen Fällen solltest du in der Anfrage-URL für die Schriftart einen text=-Wert angeben. Dadurch kann Google Fonts eine für Ihre Anfrage optimierte Schriftartdatei zurückgeben. In einigen Fällen kann dies die Größe der Schriftartdatei um bis zu 90 % reduzieren.

Füge dazu deiner API-Anfrage einfach text= hinzu. 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 so 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, mit denen Sie UTF-8-Zeichen angeben können. ¡Hola! wird beispielsweise so dargestellt:

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

API-URLs bilden

Strikt

Grundsätzlich ist es bei der aktualisierten CSS API strenger, welche Anfragen akzeptiert werden als die ursprüngliche CSS API.

Allgemeine Richtlinien:

  • Achsen alphabetisch auflisten (en-US Sprache)
  • Achsenwertgruppen (d.h. Semikolons) müssen numerisch sortiert werden
  • Tuples dürfen sich nicht überschneiden oder dürfen sich nicht überschneiden (z.B. 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 (en-US locale)

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 im Bereich der entsprechenden Achse

text: Text, der in der angeforderten Schriftart angezeigt wird

display: auto | block | swap | fallback | optional

Unterstützung für Legacy-Browser

In Browsern ohne Unterstützung für variable Schriftarten kann das Design möglicherweise nicht wie vorgesehen angezeigt werden. Prüfen Sie die Unterstützung der Schriftart für variable Browser in caniuse.

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

In diesem Beispiel soll „450“ des Markazi-Texts verwendet werden, muss aber auf „Normal“ (400) oder „Mittel“ (500) zurückgehen, wenn die Funktionen der variablen Schriftart nicht 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, sowie die Gewichtungen 400 und 500 an Clients, die dies nicht tun. Im Allgemeinen 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 in älteren Browsern für einige verschiedene Anfragen verfügbar wären.

Anfragen Stile, die in älteren Browsern verfügbar sind
italien@0 italien@0
wght@500 wght@500
wght@432 wght@400;500
wght@440..560 wght@400;500;600

Verfügbare Schriftarten

Hier finden Sie eine Tabelle der variablen Schriftarten, die in der API V2 verfügbar sind.

Weitere Informationen

  • Eine vollständige Liste der Schriftfamilien, die über die Google Fonts API bereitgestellt werden, finden Sie unter Google Fonts.
  • Weitere Informationen zur Funktionsweise der Google Fonts API finden Sie auf der Seite Technische Überlegungen.