Diese Seite wurde von der Cloud Translation API übersetzt.

Aktualisierung der CSS API

Google Fonts unterstützt jetzt beim Aktualisieren der API-Version 2 vollständig variable Variablen. Wir erläutern, wie Sie sowohl einzelne als auch mehrere Schriftfamilien aufrufen und Achsenbereiche angeben. Einen detaillierten Einblick in variable Schriftarten erhalten Sie in dieser interaktiv illustrierten Broschüre von David Berlow bei TypeNetwork.

Neue Funktionen

Alles beginnt mit einer neuen Basis-URL:

https://fonts.googleapis.com/css2

Die Syntax für die Angabe von Stilen innerhalb jeder Familie wurde geändert, um die Schriftvariablen „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 wird, sollte die Seite in der Schriftart Crimson Pro den Text „Making the Web Beautiful“ rendern.

Das Web ansprechend gestalten

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 die Datei in einem Browser geöffnet werden soll, sollte die Seite in Crimson Pro und dann in Literata den Text „Making the Web Beautiful“ rendern.

Das Web ansprechend gestalten

Achsenbereiche

Variablenschriftarten bieten kontinuierliche Stilbereiche, oft ohne zusätzliche Latenz. Das ist relevant für das Responsive Webdesign. Diese dynamische Typographie verwendet fortlaufende Stilbereiche, die alle Gewichtungen auf einer Seite zwischen 100 und 900 bieten und die Gewichtung je nach den jeweiligen Bedingungen dynamisch anpassen.

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

Schriftart(en)	Anfragen
Purpurrot [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900`
Purpurrot, kursiv [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900`
Rubinrot, Fett-kursiv, [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700`

Ihr Browser unterstützt keine Variablen (caniuse). In einem Browser, der Schriftvariationen unterstützt, sollte der folgende Text Crimson Pro als gleichmäßige Gewichtung zwischen 400 und 500 rendern. Mit CSS-Animationen kann der Text bei der Interaktion nahtlos variieren.

Wenn Ihr Browser variable Schriftarten (caniuse) vollständig unterstützt, sollte der folgende Text Crimson Pro als gleichmäßige Gewichtung zwischen 400 und 500 rendern. Mit CSS-Animationen kann der Text bei der Interaktion nahtlos variieren.

Das Web ansprechend gestalten

Individuelle Stile, z. B. Gewicht

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

Diese Beispiele zeigen dies in der Praxis.

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

Unter Google Fonts sind alle verfügbaren Schriftarten für jede Schriftfamilie 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 Kursivachse 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 fehl, die für diese Achsen keine Positionen angeben. Wenn Sie beispielsweise eine Familie mit einer Gewichtungsachse von 500 bis 900 anfordern, muss die Gewichtungsposition angegeben werden.

Nicht standardmäßige Gewichtungen

Bei statischen Schriftarten werden die verschiedenen Schriftstile normalerweise als Vielfaches von 100 angegeben (z.B. 300, 400, 700). Variablenschriftarten bieten sowohl Standard- als auch Zwischengewichtungen. So rendern Sie eine Zwischengewichtung:

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

Ihr Browser unterstützt offenbar keine Variablen (caniuse). In einem Browser, der Schriftvariationen 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 einer eindeutigen Gewichtung von 400, 450 und 500 rendern.

Das Web ansprechend gestalten

Latenz und Dateigröße optimieren

Machen Sie genaue Angaben zu den verwendeten Stilen. Die API liefert die angeforderten Stile in kompakten Schriftarten. Wenn Sie nicht verwendete Stile anfordern, kann dies dazu führen, dass Ihre Nutzer mehr Schriftartendaten herunterladen, als sie benötigen. Dies führt zu einer höheren Latenz. 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.

Schriftartanzeige verwenden

Mit der Eigenschaft font-display können Sie festlegen, was geschieht, während die Schriftart noch geladen wird oder aus anderen Gründen 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

Schriftartanfragen 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. Dies ist häufig der Fall, wenn Sie eine Webschriftart in einem Logo oder einer Überschrift verwenden.

In diesen Fällen sollten Sie den Wert text= in der Schriftart-Anfrage-URL angeben. So 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 % verringern.

Fügen Sie der API-Anfrage einfach text= hinzu, um diese Funktion zu verwenden. Wenn Sie beispielsweise nur Inconsolata für den Titel Ihres Blogs verwenden, können Sie den Titel selbst als Wert für text= festlegen. Die Anfrage würde so aussehen:

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

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

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

Dieses Feature funktioniert auch für internationale Schriftarten, in denen Sie UTF-8-Zeichen angeben können. Beispiel: ¡Hola! wird so dargestellt:

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

API-URLs bilden

Strikt

Die aktualisierte CSS API ist im Hinblick auf die akzeptierten Anfragen strenger als die ursprüngliche CSS API.

Allgemeine Richtlinien:

Achsen alphabetisch auflisten (en-US Sprache)
Achsenwertgruppen (Tupel) müssen numerisch sortiert werden
Tupel können 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 (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 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 ohne Unterstützung für variable Schriftarten können Ihr Design möglicherweise nicht wie vorgesehen darstellen. Prüfen Sie die Unterstützung der Variablen für Schriftart von Browsern auf Caniuse.

Durch das Üben der fortschrittlichen Verbesserung können Sie unerwartetes Verhalten in älteren Browsern vermeiden. Verwenden Sie @supports-Abfragen in Ihrem CSS, um Funktionen für variable Schriftarten zu steuern.

In diesem Beispiel soll die Gewichtung 450 von Markazi-Text verwendet werden. Wenn die Funktionen für variable Schriftarten nicht unterstützt werden, muss jedoch entweder „Normal“ (Gewichtung 400) oder „Mittel“ (Gewichtung 500) verwendet 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 eine Gewichtung von 450 an Clients, die variable Schriftarten unterstützen, und eine Gewichtung von 400 und 500 an Clients, die dies nicht tun. Im Allgemeinen sind die Fallbacks für den Bereich Ihrer Anfrage in Legacy-Browsern verfügbar.

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

Diese Beispiele zeigen, welche Stile in Legacy-Browsern für einige verschiedene Anfragen verfügbar wären.

Anfragen	Stile in älteren Browsern
`ital@0`	`ital@0`
`wght@500`	`wght@500`
`wght@432`	`wght@400;500`
`wght@440..560`	`wght@400;500;600`

Verfügbare Variablenschriftarten

Eine Tabelle der Variablen, die in der API V2 verfügbar sind, finden Sie hier.

Weitere Informationen

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