Variable fonts replace multiple static font files with one file — reducing HTTP requests and total Dateigröße?

Variable fonts replace multiple static font files with one file — reducing HTTP requests and total Dateigröße.

Nicht alle Achsen sind gleich: Gewicht (wght) ist am häufigsten, aber prüfe auch Breite (wdth), optische Größe (opsz) und benutzerdefinierte Achsen?

Nicht alle Achsen sind gleich: Gewicht (wght) ist am häufigsten, aber prüfe auch Breite (wdth), optische Größe (opsz) und benutzerdefinierte Achsen.

Verwende font-variation-settings in CSS-Übergängen für flüssige animierte Typografie-Effekte.

Teste variable Schriften mit interaktiven Achsenreglern — Google Fonts oder lade deine eigene hoch

Test variable fonts with interactive axis sliders — choose from Google Fonts or upload your own, alles in deinem Browser.

1Wähle einen/eine variable font from the Google Fonts dropdown or upload your own (.ttf, .otf, .woff2).
2Adjust typography settings: Schriftgröße, line height, letter spacing, text and Hintergrundfarbes.
3Verwende die Variations-Achsenregler (Stärke, Breite, Neigung usw.), um den vollen Umfang der Schrift zu erkunden.
4Preview the result mit dem/der editable preview text.
5Kopiere den/die/das CSS output einschließlich font-variation-settings for use in your project.

Variable fonts replace multiple static font files with one file — reducing HTTP requests and total Dateigröße.
Nicht alle Achsen sind gleich: Gewicht (wght) ist am häufigsten, aber prüfe auch Breite (wdth), optische Größe (opsz) und benutzerdefinierte Achsen.
Verwende font-variation-settings in CSS-Übergängen für flüssige animierte Typografie-Effekte.