Google Fonts selbst hosten für bessere Core Web Vitals

Google Fonts selbst hosten für verbesserte Core Web Vitals

Laut dem Web Almanac 2025 werden Google Fonts auf 54 % aller Websites verwendet. Die meisten dieser Websites laden Schriftarten von den Google-Servern. Das ist ein Problem. Jede Google Fonts-Anfrage fügt externe Verbindungen, Render-blockierendes CSS und Schriftartdateien hinzu, die Sie nicht vorladen (preload), zwischenspeichern (cache) oder kontrollieren können. Das Selbst-Hosten derselben Schriftarten beseitigt all diese Probleme und dauert etwa 10 Minuten.

Zuletzt überprüft von Arjen Karel im Februar 2026

Core Web Vitals verstehen

Die Core Web Vitals sind drei Metriken, die Google als Ranking-Signale verwendet: LCP (Laden), INP (Interaktivität) und CLS (visuelle Stabilität). Das Selbst-Hosten von Schriftarten verbessert in erster Linie LCP und CLS und kann auch den First Contentful Paint (FCP) verbessern.

Auswirkungen von Google Fonts auf Core Web Vitals

Google Fonts, die oft in Webseiten eingebunden werden, um Typografie und Design zu verbessern, können einen erheblichen Einfluss auf die Core Web Vitals haben, in erster Linie auf den Largest Contentful Paint (LCP) und den Cumulative Layout Shift (CLS).

Für die meisten Leute, mit denen ich spreche, ist das eine neue Information. Das Google-CDN soll das beste der Welt sein. Warum also sind Google Fonts schlecht für die Seitengeschwindigkeit?

1. Das „Shared Cache“-Argument ist tot. Viele Entwickler glauben immer noch, dass Besucher die Schriftart wahrscheinlich von einer anderen Website im Cache haben, weil Google Fonts so beliebt sind. Das war vor 2020 wahr. Seit Chrome v86 und Safari (das dies seit 2013 tut) partitionieren Browser ihren HTTP-Cache nach Top-Level-Domain. Das bedeutet, dass Ihre Website Google Fonts für jeden neuen Besucher von Grund auf neu herunterlädt, unabhängig davon, welche anderen Websites diese besucht haben. Der Leistungsvorteil eines gemeinsam genutzten CDN-Caches existiert nicht mehr.

2. Das Stylesheet befindet sich niemals im Browser-Cache für neue Besucher. Das erste Problem mit Google Fonts ist, dass es auf ein externes Stylesheet angewiesen ist, das von fonts.google.com oder fonts.googleapis.com gehostet wird. Dieses Stylesheet kann nicht von verschiedenen Domains wiederverwendet werden (wie viele Leute zu glauben scheinen). Dies bedeutet, dass das Render-blockierende Stylesheet für Erstbesucher niemals aus dem superschnellen Browser-Cache bereitgestellt wird und das Rendern der Seite immer verlangsamt.

3. Es erfordert 2 Verbindungen zu 2 neuen Servern. Das zweite Problem ist, dass wir uns mit 2 verschiedenen Servern verbinden müssen, um die CSS-Datei und die Schriftartdateien herunterzuladen. Jede anfängliche Verbindung zu einem neuen Server hat einen erheblichen Overhead und nimmt zusätzliche Zeit in Anspruch. Zeit, die wir hätten sparen können, indem wir die Dateien über unsere bereits geöffnete Verbindung zu unserem Server bereitstellen. Um dies zu vermeiden, empfiehlt Google, ein Preconnect zu ihren Domains durchzuführen. Das wird das Problem ein wenig mildern, aber es ist immer noch weit davon entfernt, perfekt zu sein.

4. Sie haben begrenzte Kontrolle über das font-display-Attribut. Obwohl Google Fonts es Ihnen ermöglicht, das font-display-Attribut festzulegen, können Sie es nur global definieren. Das bedeutet, dass alle woff2-Dateien dieselbe font-display-Einstellung erhalten.

5. Der endgültige Speicherort der woff2-Datei ist unbekannt. Das bedeutet, dass wir unsere wichtigsten Schriftarten nicht vorladen (preload) können. Das bedeutet, dass unsere Schriftartdateien relativ spät zum Herunterladen in die Warteschlange gestellt werden und wir wahrscheinlich einen sichtbaren Layout-Shift erhalten, der durch den Flash of Unstyled Text (FOUT) verursacht wird. Lesen Sie mehr darüber, wie Sie sicherstellen, dass Text während des Ladens von Webfonts sichtbar bleibt.

6. Sie haben keine Kontrolle über die Schriftartdateien. Sie können sie nicht weiter in Subsets unterteilen, Sie können keine langen Cache-Header festlegen und Sie können sie nicht von Ihrem eigenen CDN bereitstellen.

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

Vorteile des Selbst-Hostens von Google Fonts

Das Selbst-Hosten von Google Fonts beinhaltet die Bereitstellung der Schriftartdateien von Ihren eigenen Servern, anstatt sich auf externe Google-Server zu verlassen. Dieser Ansatz kann mehrere Vorteile bieten:

1. Verbesserte Geschwindigkeit der Schriftartenbereitstellung: Das Selbst-Hosten von Schriftarten verringert die Abhängigkeit von externen Servern, was zu einer schnelleren Bereitstellung der Schriftarten und folglich zu einem schnelleren Rendern von Textinhalten führt. Diese Verbesserung kann sich positiv auf LCP auswirken und sicherstellen, dass das größte Textelement schneller sichtbar wird. Der Web Almanac 2025 zeigt, dass das Selbst-Hosten auf dem Vormarsch ist: 31,5 % der Desktop-Websites hosten ihre Schriftarten nun ausschließlich selbst, ein Anstieg von 28 % im Jahr 2024.

2. Reduzierte Layout Shifts: Indem Sie Google Fonts selbst hosten, können Sie steuern, wie die Schriftart geladen und angezeigt wird, wodurch die Wahrscheinlichkeit von Layout Shifts, die durch verzögertes Rendern von Schriftarten verursacht werden, minimiert wird. Dies trägt zur Verbesserung der allgemeinen visuellen Stabilität Ihrer Webseite bei und wirkt sich positiv auf CLS aus.

3. Volle Kontrolle über Caching und Preloading: Wenn Sie selbst hosten, kennen Sie die genaue URL jeder Schriftartdatei. Das bedeutet, dass Sie kritische Schriftarten vorladen (preload), aggressive Cache-Header (ein Jahr oder mehr) festlegen und Schriftarten über dieselbe Verbindung wie den Rest Ihrer Seite bereitstellen können.

DSGVO-Konformität

Im Januar 2022 entschied das Landgericht München, dass das Laden von Google Fonts von den Servern von Google gegen die DSGVO verstößt, da es die IP-Adressen der Besucher ohne Zustimmung an Google überträgt. Das Selbst-Hosten beseitigt dieses Problem vollständig, da beim Laden der Schriftarten keine Daten an Google gesendet werden. Wenn Ihre Website europäische Besucher hat, ist dies ein weiterer Grund, selbst zu hosten.

Best Practices für das Selbst-Hosten von Google Fonts

Um Ihre selbst gehosteten Google Fonts für eine bessere Core Web Vitals-Performance zu optimieren, sollten Sie die folgenden Best Practices implementieren:

1. Nur das WOFF2-Format verwenden: WOFF2 bietet die beste Komprimierung (etwa 30 % kleiner als WOFF) und hat eine Browser-Unterstützung von 96 %+. Der einzige Browser, der WOFF2 nicht unterstützt, ist der Internet Explorer, der sein Lebensende (end-of-life) im Juni 2022 erreicht hat. Sie benötigen kein WOFF-Fallback mehr.

2. Font Subsetting: Um die Größe der Schriftartdateien weiter zu reduzieren, sollten Sie Font Subsetting in Betracht ziehen, bei dem nur die Zeichen eingefügt werden, die für den Inhalt Ihrer Webseite benötigt werden. Dies kann zu einem schnelleren Laden der Schriftarten und verbesserten Core Web Vitals führen. Google Fonts verwendet bereits Subsets nach unicode-range, aber beim Selbst-Hosten können Sie mit Tools wie fonttools noch weiter gehen.

3. Strategisches font-display-Attribut: Konfigurieren Sie das font-display-Attribut strategisch, um das Textrendering während des Ladens von Schriftarten zu steuern. Der Wert „swap“ beschleunigt den First Contentful Paint, indem sichergestellt wird, dass Fallback-Schriftarten angezeigt werden, bis der Webfont vollständig geladen ist. Der Wert „optional“ überspringt den Font Swap komplett und verhindert Layout Shifts, indem die Fallback-Schriftart niemals ersetzt wird. Eine strategische Mischung dieser beiden optimiert oft sowohl den Cumulative Layout Shift als auch den First Contentful Paint. Laut dem Web Almanac 2025 verwenden mittlerweile 50 % der Seiten font-display: swap, aber nur 0,5 % verwenden font-display: optional, was die beste Wahl für maximale CWV-Performance bei nicht-kritischen Schriftarten ist.

4. Schriftarten vorladen (preload): Stellen Sie sicher, dass Schriftarten so früh wie möglich verfügbar sind, indem Sie die wichtigsten Schriftarten (maximal 1 oder 2) mit dem Link-Preload-Mechanismus vorladen. Fügen Sie immer das Attribut crossorigin ein, selbst bei Same-Origin-Schriftarten, da der Browser sonst die Schriftart zweimal herunterlädt. Nur 12 % der Seiten laden ihre Schriftarten vor, also ist dies ein einfacher Gewinn (easy win).

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

Wie man einen Google Font selbst hostet (der richtige Weg)

Das Herunterladen und Selbst-Hosten eines Google Fonts dauert etwa 10 Minuten. Denken Sie daran, dass Sie vor der Verwendung immer die Lizenz der Schriftart überprüfen sollten. Die meisten Google Fonts sind unter der SIL Open Font License verfügbar, die eine kostenlose Nutzung einschließlich kommerzieller Nutzung erlaubt.

Die schnellste Methode ist die Verwendung von google-webfonts-helper, womit Sie jeden Google Font als WOFF2-Dateien mit gebrauchsfertigem CSS herunterladen können. Aber wenn Sie es manuell tun möchten, um genau zu verstehen, was passiert, befolgen Sie diese Schritte:

1. Gehen Sie zur Google Fonts-Website unter fonts.google.com.

2. Wählen Sie die Schriftart aus, die Sie verwenden möchten, und wählen Sie die Schriftstärken (font weights) aus, die Sie einbeziehen möchten.

3. Klicken Sie auf der Schriftartseite in der oberen Leiste auf die Schaltfläche 'Selected families' (Ausgewählte Familien). Dort finden Sie den Link zum von Google gehosteten Stylesheet.

   

4. Kopieren Sie die URL dieses Stylesheets und öffnen Sie sie in Ihrem Browser. Sie sehen nun alle font-face-Deklarationen, die für die Schriftart verfügbar sind.

   

5. Sie werden vielleicht bemerken, dass es mehr als 1 woff2-Datei gibt, obwohl wir nur eine Schriftartdatei verwendet haben. Das liegt daran, dass es für verschiedene Unicode-Bereiche eine andere Schriftartdatei gibt. Um herauszufinden, welche Schriftarten wir herunterladen sollten, sollten Sie das von Google gehostete Stylesheet vorübergehend zu Ihrer Website hinzufügen. Verwenden Sie die Tastenkombination Strg-Umschalt-I, um Ihre Chrome DevTools zu öffnen. Navigieren Sie zur Registerkarte „Network“ (Netzwerk) und klicken Sie auf „Font“ (Schriftart). Aktualisieren Sie nun die Seite (Strg-R), um zu sehen, welche Schriftart zum Herunterladen ausgelöst wird.

6. Gleichen Sie diesen Namen der Schriftartdatei mit der entsprechenden woff2-Datei im Stylesheet ab. Jetzt wissen Sie, welche Schriftartdatei für Ihre Website verwendet wird!

7. Der nächste Schritt besteht darin, die vollständige URL der Schriftart zu kopieren und diese in Ihrem Browser zu öffnen. Dies löst einen Download für diese Schriftartdatei aus. Kopieren Sie diese Datei auf Ihre Website.

8. Kopieren Sie das CSS für den verwendeten Webfont in Schritt 7 und fügen Sie es in Ihr Stylesheet ein. Vergessen Sie nicht, die URL vom Google-CDN zu Ihrem eigenen Server zu ändern (zum Beispiel '/fonts/inter-400.woff2').

9. Laden Sie die Schriftart vor (preload), wenn es sich um eine visuell wichtige Schriftart handelt.

Jetzt haben Sie den Google Font Ihrer Wahl erfolgreich heruntergeladen und selbst gehostet.

Ein Praxisbeispiel

Hier ist ein vollständiges Beispiel unter Verwendung der Schriftart Inter, bei dem alle Best Practices angewendet wurden: Preloading, nur WOFF2, ein strategischer font-display-Wert und ein System-Font-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>

Überwachen Sie die Auswirkungen

Nach der Umstellung auf selbst gehostete Schriftarten sollten Sie die Verbesserung mit Real User Monitoring überprüfen. In unseren CoreDash-Daten sehen Websites, die ihre Schriftarten mit ordnungsgemäßem Preloading selbst hosten, eine mediane LCP-Verbesserung von 180 ms im Vergleich zum Laden aus dem Google Fonts-CDN. Verfolgen Sie Ihre LCP, CLS und FCP im Laufe der Zeit, um sicherzustellen, dass die Änderung funktioniert.