Google Fonts selbst hosten für bessere Core Web Vitals

Google Fonts selbst hosten für bessere Core Web Vitals

Laut dem Web Almanac 2025 nutzen 54 % aller Websites Google Fonts. Die meisten davon laden Schriften direkt von Google-Servern. Das ist ein Problem. Jeder Google-Fonts-Request verursacht externe Verbindungen, render-blocking CSS und Schriftdateien, die du weder preloaden noch cachen oder kontrollieren kannst. Hostest du dieselben Schriften selbst, beseitigst du all diese Probleme. Das dauert etwa 10 Minuten.

Zuletzt geprüft von Arjen Karel im Februar 2026

Core Web Vitals verstehen

Die Core Web Vitals sind drei Messwerte, die Google als Rankingsignale nutzt: LCP (Ladezeit), INP (Interaktivität) und CLS (visuelle Stabilität). Schriften selbst zu hosten verbessert vor allem LCP und CLS – und kann auch den First Contentful Paint (FCP) beschleunigen.

Einfluss von Google Fonts auf die Core Web Vitals

Google Fonts wird oft für ansprechende Typografie und besseres Design eingebunden, kann sich aber spürbar auf die Core Web Vitals auswirken – vor allem auf den Largest Contentful Paint (LCP) und den Cumulative Layout Shift (CLS).

Für die meisten, mit denen ich spreche, ist das neu. Das Google-CDN gilt schließlich als das beste der Welt. Warum ist Google Fonts also schlecht für die Ladezeit?

1. Das Argument des „Shared Cache“ ist tot. Viele Entwickler glauben immer noch: Weil Google Fonts so verbreitet ist, haben Besucher die Schrift bestimmt schon über eine andere Website im Cache. Vor 2020 stimmte das. Seit Chrome v86 und Safari (der das schon seit 2013 tut) partitionieren Browser ihren HTTP-Cache nach Top-Level-Domain. Deine Website lädt Google Fonts für jeden neuen Besucher also komplett neu herunter – ganz egal, welche Websites er vorher besucht hat. Den Performance-Vorteil eines geteilten CDN-Cache gibt es nicht mehr.

2. Das Stylesheet liegt bei neuen Besuchern nie im Browser-Cache. Das erste Problem: Google Fonts setzt auf ein externes Stylesheet von fonts.google.com oder fonts.googleapis.com. Dieses Stylesheet lässt sich nicht über verschiedene Domains hinweg wiederverwenden (auch wenn viele das glauben). Das render-blocking Stylesheet kommt bei Erstbesuchern also nie aus dem extrem schnellen Browser-Cache und bremst das Rendering der Seite jedes Mal aus.

3. Es braucht 2 Verbindungen zu 2 neuen Servern. Das zweite Problem: Um CSS- und Schriftdateien herunterzuladen, müssen Verbindungen zu 2 verschiedenen Servern aufgebaut werden. Jeder Neuaufbau einer Serververbindung erzeugt spürbaren Overhead und kostet Zeit. Zeit, die du sparen kannst, indem du die Dateien über die bereits bestehende Verbindung zu deinem eigenen Server auslieferst. Um das abzufedern, rät Google zu preconnect auf die Google-Domains. Das lindert das Problem etwas, ist aber immer noch weit von perfekt entfernt.

4. Du hast nur begrenzte Kontrolle über das font-display-Attribut. Google Fonts erlaubt dir zwar, font-display zu setzen, allerdings nur global. Das bedeutet: Alle WOFF2-Dateien bekommen dieselbe font-display-Einstellung.

5. Der endgültige Speicherort der WOFF2-Datei ist unbekannt. Dadurch kannst du deine wichtigsten Schriften nicht preloaden. Die Schriftdateien landen entsprechend spät in der Download-Warteschlange. Das führt meist zu einem sichtbaren Layout Shift durch Flash of Unstyled Text (FOUT). Lies hier mehr darüber, wie du sicherstellst, dass Text während des Webfont-Ladens sichtbar bleibt.

6. Du hast keine Kontrolle über die Schriftdateien. Du kannst sie nicht weiter subsetten, keine langen Cache-Header setzen und sie nicht über dein eigenes CDN ausliefern.

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Vorteile von selbst gehosteten Google Fonts

Wenn du Google Fonts selbst hostest, lieferst du die Schriftdateien über deine eigenen Server aus, statt auf externe Google-Server zu setzen. Das bringt handfeste Vorteile:

1. Schnellere Schriftauslieferung: Eigene Schriften verringern die Abhängigkeit von externen Servern. Die Schriften werden schneller übertragen und Textinhalte rendern früher. Das verbessert den LCP, weil das größte Textelement schneller sichtbar wird. Der Web Almanac 2025 belegt diesen Trend: 31,5 % aller Desktop-Websites hosten ihre Schriften inzwischen ausschließlich selbst – 2024 waren es noch 28 %.

2. Weniger Layout Shifts: Wenn du Google Fonts selbst hostest, kontrollierst du genau, wie die Schrift geladen und gerendert wird. Das minimiert das Risiko von Layout Shifts durch verzögerte Schriftanzeige. So verbesserst du die visuelle Stabilität deiner Website und senkst den CLS.

3. Volle Kontrolle über Caching und Preloading: Beim Self-Hosting kennst du die exakte URL jeder Schriftdatei. Du kannst also kritische Schriften preloaden, aggressive Cache-Header setzen (ein Jahr oder länger) und Schriften über dieselbe Verbindung wie den Rest deiner Seite ausliefern.

DSGVO-Konformität

Im Januar 2022 entschied das Landgericht München, dass das Laden von Google Fonts über Google-Server gegen die DSGVO verstößt, weil dabei IP-Adressen von Besuchern ohne Einwilligung an Google übermittelt werden. Self-Hosting beseitigt dieses Problem vollständig: Beim Laden der Schriften fließen keinerlei Daten an Google. Hat deine Website europäische Besucher, ist das ein weiterer handfester Grund fürs Self-Hosting.

Best Practices für selbst gehostete Google Fonts

Mit diesen Best Practices optimierst du selbst gehostete Google Fonts für bessere Core Web Vitals:

1. Nutze ausschließlich das WOFF2-Format: WOFF2 bietet die beste Komprimierung (rund 30 % kleiner als WOFF) und wird von über 96 % aller Browser unterstützt. Der einzige Browser ohne WOFF2-Support ist der Internet Explorer – und dessen Lebenszyklus endete im Juni 2022. Du brauchst keinen WOFF-Fallback mehr.

2. Font-Subsetting: Um Dateien noch weiter zu verkleinern, nutze Font-Subsetting. Dabei behältst du nur die Zeichen in der Schriftdatei, die du auf deiner Website tatsächlich brauchst. Das sorgt für schnellere Ladezeiten und bessere Core Web Vitals. Google Fonts liefert bereits Subsets per unicode-range aus. Beim Self-Hosting kannst du mit Tools wie fonttools aber noch einen Schritt weiter gehen.

3. Das Attribut font-display gezielt einsetzen: Steuere das Rendering deiner Texte während des Ladens über das font-display-Attribut. Der Wert „swap“ beschleunigt den First Contentful Paint, weil der Browser sofort Fallback-Schriften anzeigt, bis die Webfont geladen ist. Der Wert „optional“ verhindert den Schrifttausch komplett: Die Fallback-Schrift wird nie nachträglich ersetzt, was Layout Shifts ausschließt. Eine gezielte Kombination aus beidem optimiert oft sowohl den Cumulative Layout Shift als auch den First Contentful Paint. Laut dem Web Almanac 2025 nutzen inzwischen 50 % aller Seiten font-display: swap, aber nur 0,5 % setzen auf font-display: optional – dabei ist genau das die beste Wahl für maximale CWV-Performance bei unkritischen Schriften.

4. Schriften preloaden: Sorge dafür, dass Schriften so früh wie möglich bereitstehen: Preloade die wichtigsten Schriften (maximal 1 oder 2) per Link-Preload. Setze dabei immer das crossorigin-Attribut – auch bei Same-Origin-Schriften. Sonst lädt der Browser die Datei doppelt herunter. Nur 12 % aller Seiten preloaden ihre Schriften. Das ist ein einfacher Hebel.

<link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>

So hostest du Google Fonts selbst (und zwar richtig)

Eine Google Font herunterzuladen und selbst zu hosten dauert etwa 10 Minuten. Prüfe vorab immer die Lizenz der Schrift. Die meisten Google Fonts stehen unter der SIL Open Font License, die eine kostenlose Nutzung erlaubt – auch für kommerzielle Projekte.

Am schnellsten geht es mit dem google-webfonts-helper: Das Tool lädt jede Google Font als WOFF2-Dateien herunter und liefert das fertige CSS direkt mit. Wenn du es manuell machen willst, um genau zu verstehen, was passiert, folge diesen Schritten:

1. Gehe auf die Website von Google Fonts unter fonts.google.com.

2. Wähle die gewünschte Schrift aus und lege die Schriftschnitte fest, die du einbinden willst.

3. Klicke oben auf der Schriftseite auf den Button „Selected Families“. Dort findest du den Link zum Google-gehosteten Stylesheet.

   

4. Kopiere die URL dieses Stylesheets und öffne sie im Browser. Du siehst nun alle für diese Schrift verfügbaren font-face-Deklarationen.

   

5. Vielleicht fällt dir auf, dass dort mehr als eine WOFF2-Datei steht, obwohl wir nur eine Schrift gewählt haben. Das liegt daran, dass es für unterschiedliche Unicode-Ranges jeweils eigene Schriftdateien gibt. Um herauszufinden, welche Schriften du herunterladen musst, binde das von Google gehostete Stylesheet vorübergehend auf deiner Website ein. Öffne die Chrome DevTools mit dem Tastenkürzel Strg+Umschalt+I. Wechsle auf den Tab „Network“ und klicke auf „Font“. Lade die Seite neu (Strg+R), um zu sehen, welche Schrift der Browser tatsächlich anfordert.

6. Gleiche diesen Dateinamen mit der passenden WOFF2-Datei im Stylesheet ab. Jetzt weißt du, welche Schriftdatei deine Website nutzt!

7. Kopiere als Nächstes die vollständige Schrift-URL und öffne sie im Browser. Dadurch wird die Schriftdatei heruntergeladen. Kopiere diese Datei auf deine Website.

8. Kopiere das CSS für die verwendete Webfont aus Schritt 7 in dein Stylesheet. Vergiss nicht, die URL vom Google-CDN auf deinen eigenen Server anzupassen (zum Beispiel „/fonts/inter-400.woff2“).

9. Preloade die Schrift (sofern sie für den sichtbaren Bereich wichtig ist).

Damit hast du die Google Font deiner Wahl erfolgreich heruntergeladen und hostest sie selbst.

Ein konkretes Praxisbeispiel

Hier ist ein vollständiges Beispiel mit der Schrift „Inter“ und allen umgesetzten Best Practices: Preloading, ausschließlich WOFF2, ein strategischer font-display-Wert und ein System-Font als Fallback.

<head>
  <title>Self-Hosted Google Fonts</title>
  <!-- preload the font (crossorigin is required, even for same-origin fonts) -->
  <link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>
  <style>
    /* Self-hosted Inter font with WOFF2 format */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      src: url('/fonts/inter-400.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback to system-ui font */
    body {
      font-family: 'Inter', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This page uses Inter with a system-ui fallback.</p>
</body>

Die Auswirkungen überwachen

Überprüfe die Verbesserung nach dem Wechsel zu selbst gehosteten Schriften mit Real User Monitoring. In unseren CoreDash-Daten verzeichnen Websites, die ihre Schriften mit sauberem Preloading selbst hosten, eine LCP-Verbesserung von median 180 ms gegenüber dem Google-Fonts-CDN. Behalte LCP, CLS und FCP im Zeitverlauf im Blick, um sicherzustellen, dass die Optimierung greift.