Google Fonts lassen sich auf dem eigenen Webserver bereitstellen. Diese Anleitung bündelt unsere bisher getrennten Beiträge: Sie prüfen vorhandene Schriftaufrufe, richten die lokale Einbindung mit einem Plugin oder manuell ein und kontrollieren anschließend das Ergebnis.
Vor dem Start: Sicherung und Bestandsaufnahme
Erstellen Sie eine Sicherung Ihrer Website und prüfen Sie Änderungen zunächst in einer Testumgebung. Laden Sie nur Schriftdateien und Varianten herunter, für die eine passende Lizenz vorliegt. Bewahren Sie die Lizenzdatei zusammen mit den Schriften auf.
2. Welche Schriftarten verwende ich überhaupt?
Um Google Fonts lokal einzubinden ist es natürlich notwendig herauszufinden welche Schriftarten überhaupt verwendet werden. Das geht ganz einfach:
Besuchen Sie Ihre Webseite und öffnen Sie die Entwicklertools. Das geht mithilfe folgender Tastenkombinationen:
Nun navigieren Sie im neu geöffneten Fenster zum Tab Netzwerk oder Netzwerkanalyse (engl. Network). Dieses ist je nach Breite des Bildschirms nicht sofort anklickbar, sondern unter dem Symbol mit zwei Pfeilen zu finden.
Im Netzwerk-Tab angekommen, können Sie die Netzwerkanalyse auf Schriften begrenzen. Drücken Sie hierzu auf Schriften (engl. Font).
Laden Sie die Webseite anschließend erneut, während die Entwicklertools geöffnet sind. Ihnen werden anschließend alle Schriftarten angezeigt, die von Ihrer Webseite verwendet werden. Wenn Sie nun mit dem Mauszeiger über eine dieser Schriften fahren, erhalten Sie die Request-URL (Anfrage-URL). Aus dieser URL können Sie ganz leicht ablesen welches Google Font verwendet wird. In unserem Beispiel ist es die Schriftart Roboto.
Die URL ist dabei folgendermaßen aufgebaut:
https://fonts.gstatic.com/s/IHRE SCHRIFTART/xyz/xyz.woff2
Notieren Sie sich alle Schriftarten die auf Ihrer Webseite verwendet werden!
3. Google Fonts mithilfe eines WordPress-Plugins lokal einbinden
Die lokale Einbindung von Google Fonts lässt sich natürlich auch mithilfe von Plugins realisieren. Dabei sollten Sie beachten, dass nicht alle Dateitypen eingebunden werden, wie es bei der manuellen Methode der Fall ist. Dies kann zu Kompatiblitätsproblemen führen in verschiedenen Browsern. Außerdem kann nicht bestimmt werden welche Teilmengen einer Schriftart eingebunden werden. Es wird also standardmäßig die gesamte Schriftart in allen Ausführungen eingebunden was Auswirkungen auf die Performance haben kann.
Die Lösung an sich gestaltet sich jedoch recht einfach. Das besagte Plugin nennt sich OMGF. Einmal installiert, und schon werden alle Google Fonts lokal und dsgvo-konform eingebunden.
Suchen Sie dazu in Ihrem WordPress Backend nach OMGF und installieren Sie dieses.
Fertig! Ihre Google Fonts werden nun dsgvo-konform und lokal eingebunden!
4. Google Schriftarten manuell lokal einbinden
Sobald Sie wissen welche Schriften Sie einbinden müssen ist die Vorgehensweise in den meisten Fällen identisch, unabhängig davon ob Sie eine statische HTML-Seite, eine WordPress-Seite, oder aber ein andere beliebige Seite besitzen.
Die grobe Vorgehensweise schaut wie folgt aus:
Die Schriftarten werden heruntergeladen, auf dem eigenen Server gespeichert und im Stylesheet bekannt gemacht. Somit entfällt die datenschutzwidrige Anfrage an Google Server und die Google Fonts sind dsgvo-konform eingebunden. Die Schriftarten werden ab dann von Ihrem eigenen Server geladen und eingebunden.
Für WordPress Systeme zeigen wir Ihnen im Nachgang auch eine Lösung mittels Plugin. Wer technisches Know-How mitbringt, sollte jedoch die manuelle Variante umsetzen.
Denn es gilt: Je weniger Plugins – desto besser!
In allen Fällen machen wir Gebrauch vom Google Webfonts Helper. Dieser ermöglicht es, auf einen Schlag alle benötigten Schriftarten herunterzuladen und benötigte Stylesheet-Regeln zu kopieren.
Wer die Schriftarten lieber ohne externen Generator einbinden möchte, findet in der Anleitung der SEO-Agentur SEOFX auch einen direkten, dienstunabhängigen Weg.
1. Navigieren Sie zum Google Webfonts Helper
Auf der Webseite angekommen geben Sie in der linken Seitenleiste Ihre gewünschte Schriftart ein. In unserem Beispiel ist es Roboto.
2. Wählen Sie nun die Varianten Ihrer Schriftart aus
Nun wählen Sie alle Varianten Ihrer Schriftart aus. In den meisten Fällen genügen die Varianten regular, 500, 700 und 900.
3. Pfad der Google Font Schriftarten festlegen
Scrollen Sie nun weiter nach unten.
Hier können Sie den Pfad verändern der auf Ihre lokalen Schriftarten zeigen wird.
Standardmäßig ist ../fonts angegeben, was bedeutet, dass das Verzeichnis fonts ein Verzeichnis höher liegt, als das Stylesheet selbst. Befindet sich das Stylesheet bspw. im selben Verzeichnis wie der Ordner fonts, so müsste der Pfad hier zu ./fonts (Achten Sie auf den Punkt!) abgeändert werden.
Der Pfad muss also je nach Projektaufbau/Präferenz abgeändert werden. Sollten Sie hier Hilfe benötigen, helfen wir Ihnen gerne weiter!
4. Stylesheet-Regeln kopieren
Nun müssen die generierten Regeln kopiert werden. Dazu klicken Sie einfach auf den Codeblock und drücken auf Ihrer Tastatur STRG+C (Mac: cmd+C ).
5. Stylesheet Regeln in das eigene Stylesheet einfügen
Die kopierten Stylesheet Regeln müssen nun in Ihr aktives Stylesheet eingefügt werden. Fügen Sie die Regeln dazu am Anfang des Dokuments ein. Die entsprechende Datei können Sie via FTP bearbeiten, oder aber innerhalb von WordPress mithilfe des Theme Editor.
Dieser findet sich unter: Design-> Theme-Datei-Editor
Achten Sie darauf, dass oben rechts das aktive Theme ausgewählt ist und wählen Sie die style.css aus der rechten Seitenleiste aus!
6. Die Schriftarten auf dem eigenen Server hochladen
Im letzten Schritt müssen Sie die zuvor heruntergeladenen Google Fonts Schriftarten auf Ihrem Webserver zugänglich machen. Entpacken Sie hierzu die heruntergeladene ZIP-Datei auf Ihrem Rechner.
Die nun entpackten Dateien laden Sie dann in das festgelegte Verzeichnis, gemäß Stylesheet Regeln. In unserem obigen Beispiel also in den Ordner fonts.
Die Dateistruktur schaut dann wie folgt aus:
7. Überprüfen und externe Einbindung abschalten
Die Vorkehrungen sind nun getroffen und die Schriftarten für die lokale Einbindung vorbereitet. Entfernen Sie jetzt die bisherigen Regeln und unterbinden Sie den externen Aufruf von Google Fonts.
Bei statischen Websites entfernen Sie die entsprechenden Einbindungen aus HTML und Stylesheet. Bei WordPress deaktivieren Sie externe Fonts nach Möglichkeit direkt in den Einstellungen des Themes oder Plugins, das sie lädt. Ist dort keine passende Option vorhanden, können Sie die in Abschnitt 3 beschriebene Plugin-Lösung verwenden.
Leeren Sie anschließend den Website-Cache und prüfen Sie im Netzwerk-Tab erneut, dass keine Anfragen an fonts.googleapis.com oder fonts.gstatic.com mehr erfolgen.
Tipps für die optimale Nutzung von Google Fonts
Nachdem Sie Google Fonts lokal eingebunden haben, können Sie mit diesen Tipps das Beste aus Ihren Schriftarten herausholen – sowohl in Bezug auf Design als auch auf Performance.
1. Nur die wirklich benötigten Schriftarten und Stile einbinden
Google Fonts bietet oft zahlreiche Schriftschnitte (z. B. Regular, Bold, Italic) und Varianten an, doch Sie benötigen wahrscheinlich nur eine begrenzte Auswahl. Indem Sie nur die benötigten Dateien einbinden, können Sie die Ladezeit Ihrer Website reduzieren.
Beispiel: Wenn Sie „Roboto“ nur in Regular und Bold verwenden möchten, laden Sie ausschließlich diese Dateien herunter.
2. Schriftarten clever kombinieren
ine gute Typografie ist entscheidend für das Erscheinungsbild Ihrer Website. Kombinieren Sie maximal zwei bis drei Schriftarten, um ein harmonisches Design zu schaffen. Zu viele verschiedene Schriftarten können unruhig wirken und die Ladezeit erhöhen.
Beispiele für gelungene Kombinationen:
- Roboto (für Überschriften) + Open Sans (für Fließtexte)
- Lora (Serif) + Montserrat (Sans-Serif)
Tipp: Nutzen Sie den Google Fonts Pairings Guide, um Inspiration für passende Kombinationen zu finden.
3. Schriftarten komprimieren und optimieren
Auch lokal eingebundene Schriftarten können weiter optimiert werden. Tools wie Font Squirrel oder Transfonter helfen Ihnen, Schriftdateien zu komprimieren und unnötige Daten zu entfernen. Wählen Sie dabei bevorzugt das WOFF2-Format, da es die beste Kombination aus Qualität und Dateigröße bietet.
4. Performance überwachen
Regelmäßige Performance-Tests Ihrer Website sind wichtig, um sicherzustellen, dass die Fonts die Ladezeit nicht negativ beeinflussen. Verwenden Sie Tools wie:
Diese Tools zeigen Ihnen auch, ob alle Schriftdateien korrekt geladen werden.
5. Schriftgrößen und Zeilenabstände optimieren
Selbst die beste Schriftart wirkt nicht gut, wenn sie schlecht lesbar ist. Achten Sie darauf, dass Schriftgröße und Zeilenhöhe (Line Height) gut abgestimmt sind:
- Fließtexte: Mindestens 16px Schriftgröße und eine Zeilenhöhe von 1,5.
- Überschriften: Klare Hierarchien (z. B. H1 größer als H2, H2 größer als H3).
6. Mobile Optimierung beachten
Auf mobilen Geräten können Schriftarten anders wirken als auf Desktops. Testen Sie die Lesbarkeit auf kleineren Bildschirmen und passen Sie Schriftgrößen und Abstände bei Bedarf in Ihrem CSS an. Nutzen Sie dazu Media Queries:
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
Mit diesen Tipps können Sie nicht nur die Optik Ihrer Website verbessern, sondern auch für eine schnelle und rechtssichere Nutzung von Google Fonts sorgen!
Nach der Umstellung prüfen
Leeren Sie Website- und Browsercache. Öffnen Sie die Entwicklertools, wechseln Sie zum Netzwerk-Tab und laden Sie die Seite neu. Prüfen Sie alle Seitentypen und eingebetteten Dienste auf Anfragen an fonts.googleapis.com und fonts.gstatic.com. Eine lokale Einbindung im Theme verhindert nicht automatisch, dass ein Plugin oder ein eingebetteter Dienst weiterhin externe Schriften lädt.
Kontrollieren Sie Überschriften, Fließtext, Sonderzeichen und mobile Ansichten. Wenn Sie Unterstützung benötigen, besprechen wir Ihre Website im Erstgespräch.
