Skip to main content
FreeToolkit .ai

Google Fonts Vorschau Vorschau von Google-Schriften mit anpassbarem Text, Größe, Gewicht und Buchstabenabstand.

Vorschau von Google-Schriften illustration
🎨

Vorschau von Google-Schriften

Vorschau von Google-Schriften mit anpassbarem Text, Größe, Gewicht und Buchstabenabstand.

1

Durchsuchen oder suchen Sie nach Schriftarten

Durchsuchen Sie 30 beliebte Google-Schriftarten oder browsen Sie die vollständige Liste.

2

Vorschau anpassen

Setzen Sie Beispieltext, Schriftgröße, Gewicht, Buchstabenabstand und Zeilenhöhe.

3

CSS kopieren

Blicken Sie sich die Schriftart in verschiedenen Gewichten an und kopieren Sie den @import- und CSS-Code.

Loading tool...

What Is Vorschau von Google-Schriften?

Das Google Fonts Preview-Tool ermöglicht es Ihnen, beliebte Google-Schriften mit vollständigen Typografie-Steuerungen zu erkunden und vorzuvorschauen. Google Fonts bietet Hunderte kostenlose, Open-Source-Schriften, die für das Web optimiert sind. Dieses Tool umfasst 30 der beliebtesten Auswahlmöglichkeiten, die nach Namen durchsucht werden können. Für jede Schriftart können Sie mit benutzerdefiniertem Beispieltext vorschauen und Schriftgröße, -gewicht (100-900), Buchstabendistanz und Zeilenhöhe anpassen. Eine Vorschau mit mehreren Gewichten zeigt die Schriftart in verschiedenen Gewichten nebeneinander, was Ihnen hilft, ihre Vielseitigkeit zu bewerten. Der generierte CSS-Code enthält die Google Fonts @import-URL und die font-family-Deklaration mit Größe-, Gewichts-, Abstands- und Zeilenhöhen-Eigenschaften. Dieses Tool ist unerlässlich für die Bewertung von Schriftarten, bevor Sie sie einem Projekt zuweisen.

Why Use Vorschau von Google-Schriften?

  • 30 beliebte Google-Schriftarten mit Suchfilterung
  • Vollständige Typografie-Kontrollen: Größe, Gewicht, Abstand, Zeilenhöhe
  • Vorschau mit mehreren Gewichten zeigt die Vielseitigkeit der Schriftart auf einen Blick
  • Kompletter CSS-Ausgabe mit @import-URL und Deklarationen

Common Use Cases

Schriftauswahl

Bewerten und vergleichen Sie Schriftarten, bevor Sie sie für ein Webprojekt auswählen.

Typografie-Test

Testen Sie Schriftarten in bestimmten Größen und Gewichten für Design-Mockups.

Markenschrift-Exploration

Erkunden Sie Schriftartoptionen für die Markenidentität und Marketingmaterialien.

Entwicklerreferenz

Blicken Sie sich schnell die Vorschau an und kopieren Sie den CSS-Code für Schriftarten während der Entwicklung.

Technical Guide

Google Fonts liefert Schriftdateien über ein CDN mit automatischer Formatauswahl (woff2 für moderne Browser). Die @import-Methode fügt Schriftarten über CSS hinzu: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); Der family-Parameter gibt die Schriftart und das Gewicht an. Der display=swap-Parameter verwendet font-display: swap für sofortige Textsichtbarkeit mit einer Fallback-Schrift, während die Web-Schrift lädt. Mehrere Schriftarten werden durch &family=-Parameter getrennt. Für eine gute Leistung sollten Sie nur die Gewichte anfordern, die Sie benötigen. Variable Schriftarten (verfügbar für viele Google Fonts) bieten alle Gewichte in einer Datei mit der wght@100..900-Syntax. Die Teilmenge von Schriftarten kann die Dateigröße weiter reduzieren, indem nur die benötigten Zeichenbereiche geladen werden: &text=Hello- oder subset=latin-Parameter. Verwenden Sie die font-family-Eigenschaft mit Fallback-Schriften: font-family: 'Inter', system-ui, sans-serif.

Tips & Best Practices

  • 1
    Fordern Sie nur die Schriftgewichte an, die Sie tatsächlich verwenden, um die Leistung zu verbessern
  • 2
    Verwenden Sie font-display: swap, um unsichtbaren Text während des Ladevorgangs zu vermeiden
  • 3
    Testen Sie Schriftarten mit Ihrem eigentlichen Inhalt und nicht nur mit Lorem Ipsum
  • 4
    Berücksichtigen Sie variable Schriftarten für maximale Gewichtflexibilität in einer einzigen Datei

Related Tools

CSS-Gradient-Text - free online tool

CSS-Gradient-Text

Erstellen Sie Text mit Farbverlauf-Füllung mithilfe von CSS background-clip und text-fill-color.

🎨 CSS & Design
Tailwind-Konfigurationsgenerator - free online tool

Tailwind-Konfigurationsgenerator

Erstellen Sie Tailwind CSS-Konfigurationsdateien mit benutzerdefinierten Farben, Schriftarten und Brechpunkten.

🎨 CSS & Design
Typographieskalen-Generator - free online tool

Typographieskalen-Generator

Erstellen Sie eine modulare Typographieskala mit anpassbarer Basisgröße, Verhältnis und Einheiten.

🎨 CSS & Design
CSS-Box-Schatten-Generator - free online tool

CSS-Box-Schatten-Generator

Erstellen Sie CSS-Box-Schatten mit mehreren Schichten, Einzugsoptionen und Echtzeit-Vorschau.

🎨 CSS & Design

Frequently Asked Questions

Q Sind Google-Schriftarten kostenlos?
Ja, alle Google-Schriftarten sind kostenlos und Open-Source für persönliche und kommerzielle Nutzung.
Q Wie füge ich Google-Schriftarten meinem Projekt hinzu?
Verwenden Sie die @import-Methode in CSS oder fügen Sie ein <link>-Tag in Ihrem HTML hinzu. Kopieren Sie den generierten Code von diesem Tool.
Q Beeinflussen Google-Schriftarten die Seitenladezeit?
Jede Schriftart verlangsamt das Herunterladen. Minimieren Sie die Auswirkungen, indem Sie die Schriftgewichte begrenzen und font-display: swap verwenden.
Q Was ist font-display: swap?
Es zeigt Text sofort mit einer Fallback-Schriftart an und tauscht dann zur Web-Schriftart aus, wenn sie geladen ist, um unsichtbaren Text zu vermeiden.
Q Kann ich Google-Schriftarten selbst hosten?
Ja, laden Sie die Schriftartdateien von fonts.google.com herunter und servieren Sie sie von Ihrem eigenen Server aus, um die DSGVO-Einhaltung und ein schnelleres Laden zu gewährleisten.

About This Tool

Vorschau von Google-Schriften is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.