Die besten Schriften für Websites: 30 kostenlose Google Fonts in echten Layouts

Die besten Schriften für Websites sind in kleinen Größen lesbar, laden schnell und passen zur Marke: Inter oder Geist für Produktseiten, Source Serif 4 oder Newsreader zum Lesen, Rubik oder Nunito für lokale Unternehmen. Hier sind 30 kostenlose Google Fonts live gezeigt, mit Lizenzen, variablen Achsen und CSS zum Kopieren.

Aktualisiert am 13. Oktober 2026

Hier sind 30 kostenlose Schriften von Google Fonts, die sich auf echten Websites bewähren, sortiert nach der Aufgabe, für die sie am besten taugen. Jede wird unten in einer Überschrift, einem Absatz und einem Button gezeigt, zusammen mit ihrer Lizenz, der Angabe, ob es eine Variable Font ist, den mitgelieferten Schriftstärken, einem Fallback-Stack und einem kopierfertigen Snippet. Die Angaben wurden im Oktober 2026 mit dem Google-Fonts-Katalog und den Lizenzdateien im Google-Fonts-Repository abgeglichen.

Schnelle Empfehlungen

• SaaS oder App: Inter oder Geist für alles, oder Plus Jakarta Sans für eine wärmer wirkende Landingpage.
• Blog oder Publikation: Source Serif 4 oder Newsreader für Fließtext, dazu eine Sans für die Navigation.
• Lokales Unternehmen: Rubik, Nunito oder Work Sans, gut lesbar auf dem Handy und freundlich.
• Premium- oder klassische Marke: Playfair Display oder EB Garamond für Überschriften, dazu eine ruhige Sans für Fließtext.
• Viele Sprachen: Noto Sans.

Teste deinen eigenen Text

Tippe unten, um den Beispieltext in jeder Vorschau auf dieser Seite zu ersetzen. Die Schriften werden von Google Fonts geladen, sobald du diesen Abschnitt öffnest. Bis dahin zeigt jede Vorschau ihren Fallback-Stack, also das, was Besucher kurz sehen, während eine Webfont heruntergeladen wird.

Alle 30 Schriften auf einen Blick

Alle 30 stehen unter der SIL Open Font License 1.1. Sie erlaubt die kommerzielle Nutzung, das Einbetten auf Websites und Self-Hosting und lässt dich die Schriften verändern, solange du die Schriftdateien nicht einzeln verkaufst und die reservierten Schriftnamen nicht für veränderte Versionen verwendest. Einige wenige Google-Fonts-Familien nutzen andere offene Lizenzen: Manche stehen unter der Apache License 2.0 (zum Beispiel Permanent Marker und Special Elite), und die Ubuntu-Familie nutzt die Ubuntu Font Licence. Prüfe vor dem Livegang immer die Lizenz, die auf der Seite der jeweiligen Familie auf fonts.google.com angegeben ist.

<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Figtree:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Merriweather:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Merriweather", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Lora:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lora", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Playfair Display", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Serif 4", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "EB Garamond", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Fraunces:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Fraunces", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Newsreader:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Newsreader", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Work+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

So lädst du eine Google Font

Setze diese Zeilen in den <head> deiner Seite, vor dein eigenes Stylesheet. Die beiden Preconnect-Hinweise lassen den Browser früh Verbindungen zum Stylesheet-Host und zum Host der Schriftdateien öffnen. Die Schriftdateien kommen von einer anderen Domain und werden im CORS-Modus abgerufen, deshalb hat der zweite Hinweis crossorigin.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Source+Serif+4:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; }

Die css2-URL lesen

• family=Inter:[email protected] fordert einen Bereich von Schriftstärken aus einer Variable Font an. Grenze den Bereich auf das ein, was du nutzt. Der Browser lädt trotzdem eine Datei pro Subset.
• family=Lato:wght@400;700 fordert zwei bestimmte statische Schriftstärken an. Bei statischen Familien ist jede aufgeführte Schriftstärke eine weitere Datei.
• ital,wght@0,400..700;1,400..700 fügt die kursiven Schnitte hinzu. Achsennamen stehen in alphabetischer Reihenfolge, Kleinbuchstaben vor Großbuchstaben.
• Wiederhole family= , um mehrere Familien in einer Anfrage zu laden.
• display=swap setzt font-display: swap in den zurückgegebenen @font-face -Regeln, sodass Text sofort in der Fallback-Schrift erscheint und wechselt, sobald die Webfont da ist, statt unsichtbar zu bleiben.
• text=Hello liefert eine Datei, die nur diese Zeichen enthält. Das ist nützlich für einen Logo-Schriftzug in einer Schrift, die du sonst nirgends verwendest.

font-display-Optionen

Self-Hosting

Da diese Schriften offen lizenziert sind, kannst du die Dateien von deiner eigenen Domain statt von Google ausliefern. Gründe dafür: eine Verbindung zu Drittanbietern weniger, volle Kontrolle über das Caching und Datenschutz, denn Anfragen an die Server von Google übermitteln die IP-Adresse des Besuchers an Google, was manche europäischen Websitebetreiber vermeiden. So geht es:

• Lade die Familie von ihrer Seite auf fonts.google.com herunter, konvertiere die WOFF2-Dateien oder behalte sie und schreibe deine eigenen @font-face -Regeln.
• Installiere die Familie in einem JavaScript-Projekt über Fontsource (zum Beispiel npm install @fontsource-variable/inter) und importiere sie in deiner Einstiegsdatei.
• Next.js-Projekte können next/font/google nutzen. Das lädt die Dateien beim Build herunter und liefert sie von deiner eigenen Domain aus.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;      /* the variable range */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

Lade beim Self-Hosting nur die eine Datei per Preload vor, die dein Text above the fold braucht, mit <link rel="preload" href="/fonts/inter-latin-var.woff2" as="font" type="font/woff2" crossorigin>. Wenn du mehrere Schriften vorlädst, konkurrieren sie mit deinen Bildern und Skripten.

Hinweise zu Variable Fonts

Eine Variable Font ist eine einzelne Datei mit einem stufenlosen Bereich entlang einer oder mehrerer Achsen, statt einer Datei pro Schriftstärke. 28 der 30 Schriften hier sind variabel, Poppins und Lato sind statisch.

• Schriftstärke (wght) wird mit der normalen Eigenschaft font-weight gesteuert, und jede Zahl im Bereich funktioniert: font-weight: 650 ist gültig.
• Breite (wdth), hier angeboten von Roboto, Open Sans, IBM Plex Sans, Noto Sans, Archivo und Merriweather, entspricht font-stretch als Prozentwert, zum Beispiel font-stretch: 85%.
• Optische Größe (opsz), in Inter, DM Sans, Source Serif 4, Newsreader, Merriweather und Fraunces, passt die Buchstabenformen an die Größe an, in der sie gesetzt sind. Browser wenden sie automatisch anhand der Schriftgröße an, weil font-optical-sizing standardmäßig auf auto steht. Fordere die Achse in der URL an (zum Beispiel family=Inter:opsz,[email protected],100..900), um sie zu nutzen.
• Eigene Achsen wie bei Fraunces SOFT und WONK werden gesetzt mit font-variation-settings: "SOFT" 100, "WONK" 1;. Nutze statt dieser Eigenschaft die Standardeigenschaften für Schriftstärke, Breite und Neigung, wo es sie gibt, denn font-variation-settings -Werte werden über Regeln hinweg nicht kombiniert.
• Eine variable Datei ist größer als jede einzelne statische Schriftstärke. Sie lohnt sich, sobald du etwa drei oder mehr Schriftstärken nutzt und wenn du Zwischenstärken für die Feinabstimmung willst.

h1 { font-weight: 780; font-stretch: 90%; }
.lede { font-weight: 350; }
.fun-heading { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 1; }

Websichere Schriften und System-Font-Stacks

"Websichere" Schriften sind auf fast jedem Windows- und Mac-Computer installiert und müssen daher nicht heruntergeladen werden. Auf Android, Linux oder jedem iPhone sind sie nicht garantiert, deshalb endet ein Font-Stack immer mit einer generischen Familie wie sans-serif oder serif.

Ein System-Font-Stack geht weiter und nutzt die Oberflächenschrift des jeweiligen Betriebssystems: San Francisco auf Apple-Geräten, Segoe UI auf Windows, Roboto auf Android und unter Linux meist Noto oder eine andere Standardschrift. Das Laden kostet nichts und es wirkt nativ. Diese Stacks empfehlen wir zum Zeitpunkt des Schreibens:

/* Sans: the operating system's interface font */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
  "Liberation Mono", "Courier New", monospace;

system-ui wird von allen aktuellen großen Browsern unterstützt. -apple-system und BlinkMacSystemFont helfen nur älteren Browsern auf Apple-Geräten und können entfallen, wenn du diese nicht unterstützt. ui-serif und ui-monospace werden nicht von jedem Browser erkannt, deshalb geht jeder Stack mit benannten Schriften weiter. Die Emoji-Schriften stehen am Ende, damit Emojis in Farbe dargestellt werden.

Dieser Absatz ist im System-Sans-Stack gesetzt und zeigt daher die Oberflächenschrift deines eigenen Geräts.

Hinweise zur Performance

• Nutze weniger Familien und Schriftstärken. Jede statische Schriftstärke, jede Kursive und jede zusätzliche Familie ist eine weitere Datei. Zwei Familien oder eine variable Familie samt Kursiver reichen für die meisten Websites.
• Setze auf WOFF2. Es ist das am stärksten komprimierte Webfont-Format, und jeder aktuelle Browser unterstützt es. Google Fonts liefert es automatisch aus.
• Subsets nach Sprache. Das Google-Fonts-Stylesheet teilt jede Familie bereits mit unicode-range in Subsets auf, sodass eine englische Seite nur die lateinische Datei lädt. Mach es beim Self-Hosting genauso.
• Weniger Layout-Verschiebung beim Tausch. Haben Fallback und Webfont unterschiedliche Breiten, fließt der Text neu um, sobald die Schrift ankommt. Wähle einen Fallback mit ähnlichen Proportionen oder passe ihn an mit size-adjust, ascent-override und descent-override in einer Fallback-Regel mit @font-face. next/font und einige Build-Tools erzeugen diese Werte für dich.
• Verstecke keinen Text. Ohne font-display: swap oder optional zeigen Browser eventuell kurz keinen Text, während Schriften laden, und die Seite ist erst später lesbar.
• Messen statt raten. Prüfe deine Seite vor und nach dem Schriftwechsel mit einem Labortest. Unser Leitfaden zu PageSpeed Insights erklärt, welche Werte Schriften beeinflussen.

Vorschläge für Schriftkombinationen

Kombiniere Schriften, die sich deutlich unterscheiden (eine Serif mit einer Sans oder eine breite Display-Schrift mit einer schlichten Textschrift) und dennoch etwas gemeinsam haben, etwa eine ähnliche x-Höhe oder Stimmung. Beschränke dich auf zwei Familien. Diese Kombinationen nutzen nur Schriften von dieser Seite:

Um weitere Kombinationen nebeneinander zu testen, nutze das Tool für Schriftkombinationen. Farben, die zu deiner Schrift passen, findest du unter Farbschemata für Websites, und fertige Layouts mit diesen Schriften findest du bei den Hero-Section-Komponenten.

Häufige Fragen

Welche Schrift ist die beste für eine Website?

Die eine beste Schrift gibt es nicht, aber Inter, Source Sans 3 und Open Sans sind verlässliche Wahlen für Fließtext, weil sie in kleinen Größen klar bleiben. Für Überschriften wähle etwas mit mehr Charakter, das zur Marke passt, etwa Playfair Display, Fraunces oder Space Grotesk.

Sind Google Fonts kostenlos für kommerzielle Nutzung?

Ja. Jede Familie auf Google Fonts steht unter einer offenen Lizenz, meist der SIL Open Font License 1.1, einige unter der Apache License 2.0 und der Ubuntu Font Licence. Alle drei erlauben die kommerzielle Nutzung auf Websites, in Apps und im Druck. Prüfe die Lizenz auf der Seite der jeweiligen Familie, bevor du sie nutzt.

Wie viele Schriften sollte eine Website verwenden?

Meist eine oder zwei Familien. Ein gängiges Setup ist eine für Überschriften und eine für Fließtext, oder eine einzige Familie mit unterschiedlichen Schriftstärken für beides. Jede zusätzliche Familie und Schriftstärke bedeutet weitere Dateien, die der Browser herunterladen muss.

Was ist eine Variable Font?

Eine Variable Font ist eine einzige Schriftdatei mit einem stufenlosen Bereich von Stilen entlang von Achsen wie Schriftstärke, Breite oder optischer Größe. Statt separate Dateien für Regular, Medium und Bold zu laden, lädst du eine Datei und kannst jede Schriftstärke in ihrem Bereich nutzen.

Was sind websichere Schriften?

Schriften, die bereits auf fast allen Windows- und Mac-Computern installiert sind, etwa Arial, Verdana, Georgia und Times New Roman, und daher nicht heruntergeladen werden müssen. Auf jedem Handy oder Linux-System sind sie nicht garantiert, beende einen Font-Stack daher immer mit einer generischen Familie wie sans-serif.

Sollte ich Google Fonts selbst hosten?

Das kannst du, die Lizenzen erlauben es. Self-Hosting spart eine Verbindung zu einer Drittanbieter-Domain, gibt dir Kontrolle über das Caching und hält die IP-Adressen deiner Besucher von Google fern. Das Laden über Google Fonts ist einfacher und übernimmt das Subsetting für dich. So oder so: Nutze WOFF2 und font-display: swap.

Überschriftentext

Dein Firmenname oder deine Headline

Absatztext

Ein Satz von deiner eigenen Startseite

Button-Beschriftung

Jetzt buchen

Größe der Überschrift: {n}px

Beispiele zurücksetzen

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Ratgeber

• Kostenlose SVG-Icon-Bibliotheken im Vergleich
• BIMI-Eintrag
• Bing Places for Business
• Bootstrap-5-Beispiele mit Tailwind-Entsprechungen
• Brave Search API Key
• Brutalistisches Webdesign
• Websites mit Blogs
• Betreffzeilen für Geschäfts-E-Mails, die geöffnet werden

Produkt

• KI-Website-Builder
• Unser $2M KI-Website-Builder in Ihrem Unternehmen
• Enterprise
• API-Dokumentation

Für wen

• Für Agenturen
• Für Freelancer
• Für Hosting-Anbieter
• Für SaaS-Plattformen
• Für Start-ups
• Finanzdienstleistungen
• Lösungen für das Gesundheitswesen

Funktionen

• Drag-and-drop-Editor
• SEO & Analytics
• Individuelles Branding
• Kunden-Dashboard
• Reseller-Abrechnung

Ressourcen

• Blog
• Hilfecenter
• Kostenlose Tools für Unternehmen
• Free UI Components
• Vorlagen
• Vorlagen-Sammlungen
• Website-Beispiele
• Ratgeber
• Vergleiche
• Alternativen
• Die besten
• Testberichte
• Preisübersichten
• Glossar und Anleitungen
• Integrationen
• Entwickler
• Benchmark
• Windows App

Unternehmen

• Über uns
• Preise
• Für das Partnerprogramm bewerben
• Kontakt
• Karriere
• Sicherheit
• Datenschutzerklärung
• Nutzungsbedingungen

Sitemap