Google Fonts richtig einbinden

um Abmahnungen zu vermeiden

Google Fonts

Aktuell rollt wieder eine Abmahnwelle durchs Land. Ein niederösterreichischer Anwalt wird von Eva ****** beauftragt, Websites abzumahnen die Google Fonts nicht korrekt einbinden und so ermöglichen, dass die IP Adresse der User an Google übertragen wird.

Wir finden die Privatsphäre sehr wichtig und befürworten grundsätzlich die Gesetze zur DSGVO. Was hier aber gemacht wird, ist vermutlich nur Geld-Macherei. Der Mandantin des Anwaltes haben die Website-Betreiber ein massives Unwohlsein verursacht. So wie die aktuelle Lage aussieht, passierten die meisten Abmahnungen allerdings vollautomatisch mittels Crawler.

Hier erklären wir in 7 Schritten, wie ihr euer WordPress diesbezüglich auf Vordermann bringen könnt. Ganz unten gibt es dann noch die Möglichkeit, uns damit zu beauftragen wenn euch das zu kompliziert wird.

Was sind die Google Fonts?

Seit 2010 bietet Google den mittlerweile beliebtesten Font-Dienst an. Über 1.000 Schriftarten bietet Google hier für jeden kostenlos an. Eine sehr schöne und angenehme Quelle für jeden der eine Website erstellt oder betreut. Das Problem hier ist  nur der Server auf dem sie gehostet sind. Wir werden nun die Google Fonts die wir im Einsatz haben lokal auf unserem eigenen Webserver hosten um sie direkt von dort laden zu können. So wird auch keine IP-Adresse übermittelt und somit kein Verstoß gegen die DSGVO gemacht.

1. Eingesetzte Fonts identifizieren

Der wohl schnellste Weg führt über den Quellcode. Die eigene Website aufrufen, mit der Maus auf die rechte Maustaste klicken und „Quellcode anzeigen“ auswählen. Der Text kann je nach Browser variieren. Mit „STRG+F3“ öffnet ihr den Such-Dialog in den ihr nun „google“ eingebt. Da Schriftarten sehr früh geladen werden, ist der erste Treffer vermutlich schon mit einer Schriftart in Verbindung zu bringen. Dies sieht dann in etwa wie folgt aus:

Eine Alternative bieten „Font-Checker“ wie etwa dieser hier: https://sicher3.de/google-fonts-checker/

Notiert euch alle Schriftarten die ihr finden könnt um sie später einzubinden.

2. WordPress vorbereiten

Nun müssen wir ein paar Einstellungen im WordPress vornehmen und ein PlugIn installieren. Es würde auch ohne PlugIn funktionieren, aber nicht so übersichtlich und komfortabel. Hierzu loggen wir uns in das Backend von WordPress, und öffnen die PlugIn übersicht in der wir „Installieren“ auswählen. Wir suchen dort nach „Simple Custom CSS and JS“, wählen „installieren“ und anschließend „aktivieren“.

Anschließend sollte im Menü auf der linken Seite der neue Punkt „Simple Custom CSS and JS“ zu sehen sein:

3. Google Fonts downloaden, CSS downloaden

– Wir wechseln zu einem Online-Tool von Mario Ranftl: https://google-webfonts-helper.herokuapp.com/fonts
– Links oben gibt es ein kleines Suchfenster in dem wir die erste Schriftart eingeben. Z.B.: Open Sans und wählen in der Liste die passende Schriftart aus
– Bei (1) ist der Schriftsatz auszuwählen. Wer auf Nummer Sicher gehen will, wählt sich hier alle aus
– Bei (2) ist die Schriftstärke auszuwählen. Wer die eingesetzten Stärken nicht weiß, geht ebenfalls auf Nummer sicher und wählt alle aus
– Nun klickt ihr in den CSS Code welcher bei (3) zu finden ist. Nach dem anklicken färbt er sich blau und ist bereit, in die Zwischenablage gelegt zu werden
– um nun die Schriftarten downzuloaden, klickt ihr auf den Button bei (4)

4. CSS im WordPress hinterlegen

Wir wechseln wieder in das Backend von WordPress und klicken bei „Individuelles CSS und JS“ auf „Individuelles CSS hinzufügen“, vergebt dort frei einen Titel (etwa „Google Fonts laden“) und kopiert darunter in das große Feld den Text aus der Zwischenablage ein. Dies sollte dann etwa so aussehen:

Anschließend mit „Veröffentlich“ rechts oben das CSS Script speichern.

5. Schriften auf den Server laden

Für diesen Schritt brauchen wir entweder ein FTP Programm, oder FTP-Zugang über den Webspace Anbieter. Als eigene Software empfehle ich „Filezilla“. Natürlich funktioniert hier jedes andere FTP-Programm genau so gut.

Wir suchen uns am Server nun das Hauptverzeichnis von WordPress. Das erkennt ihr, wenn ihr Dateien wie etwa „index.php“ findet. Dort ist nun ein Ordner mit dem Namen „fonts“ anzulegen. In diesen Ordner kommen die Dateien, die wir vorhin von „google webfonts helper“ gedownloadet haben. Diese Datei gehört vorher noch entpackt. Wenn nun die Dateien auf dem eigenen Webserver sind, ist dieser Schritt abgeschlossen.

6. Google Fonts deaktivieren

Nun kommt es zum finalen Schritt der das Laden über die Google Server unterbindet. Hierzu öffnen wir den Theme-Editor über das Menü „Design“:

Mit einem Klick auf „Theme Funktionen – function.php“ öffnen wir eine heikle Datei in der WordPress Installation. Eventuell kam als ersteres auch ein Warnhinweis den ihr bestätigen müsst.

An letzter Position in dieser Datei fügt ihr nun folgenden Code hinzu und bestätigt es anschließend mit „Datei aktualisieren“ unter dem Eingabefeld.

				
					add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
				
			

7. Laden der Fonts überprüfen

Nun ist alles so eingestellt, wie es sein muss. Die Fonts werden nun nicht mehr von den Google Servern geladen, sondern vom eigenen Server.

Zum Schluss prüfen wir über den eingangs erwähnten Link, ob alles funktioniert hat: https://sicher3.de/google-fonts-checker/

Sie wollen diese Arbeiten machen lassen?

Nun gibt es bestimmt viele Menschen, die hier den Überblick verlieren oder einfach keine Lust darauf haben. Für diese Gruppe haben wir natürlich unsere Angebote. Gerne übernehmen wir das für Sie!

So können Sie sicher sein, dass die Umsetzung korrekt ist und Sie somit in keine Abmahnung tappen.

Der Service kostet einmalig € 48,00 und wird innerhalb von 2 Tagen nach Zahlungseingang umgesetzt. Bitte lediglich das Formular unten ausfüllen. Wir treten anschließend mit Ihnen in Kontakt. Wichtig hierfür sind Zugangsdaten zum Webspace sowie ein Administrator-Zugang zu WordPress. Gerne unterstützen wir Sie auch bei der Suche nach diesen Zugangsdaten telefonisch.

Analyse
Wir überprüfen die Website Ihre Website und Sie bekommen eine ToDo-Liste um DSGVO-konform zu sein
149,90
/ einmalig
wöchentliches Backup automatisch
monatliche Updates der PlugIns
monatliches Update des WordPress Core
1x kostenlose Wiederherstellung bei Problemen durch Updates

Details

Bei den manuellen Updates der PlugIns, Themes sowie des WordPress Core wird vor dem Update ein Klon der Website erstellt. Auf diesem wird das Update durchgeführt und manuell der Erfolg geprüft. Erst dann gehen alle Updates auch wirklich online.

Bei Problemen die nicht durch Updates hervorgerufen werden, ist einmal monatlich eine Wiederherstellung der Website aus einer bestehenden Sicherung inkludiert. Jede weitere Wiederherstellung kostet einmalig € 20 (netto).

Google Fonts
Es hapert nur an den Google Fonts? Dann ist dieses Paket das richtige für Sie!
45,90
/ einmalig
wöchentliches Backup manuell
monatliche Updates der PlugIns
monatliches Update des WordPress Core
3x kostenlose Wiederherstellung bei Problemen durch Updates
24/7 Monitoring der Website
Proaktiver Schutz
WordPress Security-Paket

Details

Die Website wird regelmäßig auf Sicherheitsprobleme überprüft. Bei Auffälligkeiten treten wir mit Ihnen in Kontakt und beheben diese im Rahmen der nächsten Wartung.

WordPress Security-Paket umfasst:
– Realtime Security Monitoring
– WordPress Firewall
– Malware Scanner
– Brute-Force-Login-Schutz
– Hack Cleanup wenn notwendig

Total Care
Für mittlere und große Projekte
79,90
/ pro Monat
tägliches Backup manuell
wöchentliches Updates der PlugIns manuell
monatliches Update des WordPress Core manuell
5x kostenlose Wiederherstellung bei Problemen durch Updates
24/7 Monitoring der Website
60 min redaktionelle Arbeiten
Proaktiver Schutz
WordPress Security-Paket

Details

Bei den redaktionellen Arbeiten im Ausmaß der vereinbarten Zeit übernehmen wir das einstellen Ihrer Inhalte auf die Website. Es wird ein Arbeitsreport erstellt. Für Zeiten die in einem Monat nicht aufgebracht werden, überträgt sich die verbliebene Zeit für bis zu 12 Monat auf das kommende Monat.