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