Inhaltsverzeichnis
Google Fonts: Kostenlose Schriftarten für Ihre Website
Datenschutzkonforme Nutzung von Google Fonts: Ist das möglich?
Korrekte Einbindung von Google Fonts
Überprüfung Ihrer Website auf Google Fonts Nutzung: Stepy by Step
Die Lösung: Lokale Einbindung von Google Fonts
Methode 1: Einsatz eines WordPress-Plugins
Methode 2: Anpassungen in den WordPress-Theme-Einstellungen
Methode 3: Manuelle Einbindung – Step by Step
“Das ist mir zu viel Arbeit und Plugins, im Ernst?”
Um was geht es genau?
Die Einbindung von Web Fonts, wie Google Fonts und Adobe Fonts, bietet eine breite Palette an Schriftarten, die das Design jeder Webseite aufwerten können. Die Einfachheit ihrer Integration mag verlockend sein, doch birgt sie rechtliche und technische Herausforderungen. Insbesondere die Einhaltung der Datenschutz-Grundverordnung (DSGVO) sowie potenzielle Einbußen bei der Seitenperformance, da externe Serveranfragen erforderlich sind, stellen Webseitenbetreiber und Webdesigner vor Probleme. In diesem Beitrag erörtern wir die Schwierigkeiten, die sich aus der Nutzung dieser Dienste ergeben können, sowohl hinsichtlich der Ladezeiten als auch der DSGVO-Konformität. Wir zeigen auf, wie durch die Verwendung lokal gespeicherter Schriftarten datenschutzrechtliche Bedenken umgangen werden können. Zudem veranschaulichen wir am Beispiel des Divi Systems von Elegant Themes, wie Google Fonts korrekt und rechtskonform eingebunden werden.
Google Fonts: Kostenlose Schriftarten für Ihre Website
Google Fonts ist ein von Google bereitgestelltes, interaktives Schriftartenverzeichnis. Es ermöglicht, unterschiedliche Schriftarten direkt in Webseiten einzubinden, ohne sie auf dem eigenen Server speichern zu müssen. Die Schriftarten laden von Googles Servern, was Speicherplatz auf dem eigenen Server einspart.
Ein wesentlicher Vorteil dieses Dienstes ist seine kostenfreie Nutzung, was ihn für Webseitenbetreiber und Webdesigner besonders attraktiv macht. Sie nutzen Google Fonts daher häufig für diverse Online-Projekte. Es bestehen dabei zwei Einbindungsmöglichkeiten.
- Sie binden die ausgewählte Schriftart nach dem Herunterladen selbstständig in Ihren Webspace ein. Dadurch wird sie bei jedem Seitenaufruf direkt von Ihrem Server geladen – eine lokale Einbindung ohne Verbindung zu Googles Servern. Dies verbessert nicht nur die Performance, sondern schützt auch die Privatsphäre der Nutzer, da keine Daten an Google übertragen werden.
- Im Gegensatz dazu erfolgt bei der zweiten Methode das Laden der Schriftart über die Google-Server bei jedem Seitenbesuch. Hierbei entsteht eine direkte Verbindung zu Google, und die IP-Adresse des Besuchers wird übermittelt. Dies kann sich nachteilig auf die Ladezeit der Webseite und somit auf SEO und Google-Ranking auswirken, da die Schriftarten nicht lokal gespeichert sind.
BGH Urteil
Der Europäische Gerichtshof sowie der Bundesgerichtshof in seinem Urteil (I ZR 7/16) haben klargestellt: Ein Hinweis mit dem Tenor „Weiteres Surfen gilt als Zustimmung“ ohne eine explizite Handlung des Nutzers, wie beispielsweise das Klicken auf einen "OK"-Button oder eine bereits vorausgewählte Zustimmungsoption, ist unzureichend. Vielmehr ist eine aktive Zustimmungserklärung des Seitenbesuchers erforderlich.
Datenschutzkonforme Nutzung von Google Fonts: Ist das möglich?
Die Verwendung von Google Web Fonts kann zwar den eigenen Server entlasten, wirft jedoch wichtige Fragen zum Datenschutz Ihrer Kunden und Webseitenbesucher auf. Da die Server von Google in den USA stehen, erfolgt mit jedem Aufruf Ihrer Webseite eine automatische Anfrage an diese Server, um die benötigten Schriftarten zu laden. Im Zuge dieser Prozesse erfasst Google umfangreiche Daten der Seitenbesucher, darunter beispielsweise:
- Nutzerbrowser
- Besuchte Webseite
- Betriebssystem des Nutzers
- Bildschirmauflösung
- IP-Adresse
- Spracheinstellungen des Browsers
Google kann über die IP-Adresse den Standort des Seitenbesuchers ermitteln, was laut Bundesgerichtshof (Urteil vom 16. Mai 2017 – VI ZR 135/13) als Erhebung personenbezogener Daten gilt. Ohne explizite Zustimmung der Nutzer dürfen Webseitenbetreiber diese Daten nicht erfassen und an Google weitergeben. Zusammen mit weiteren gesammelten Informationen ermöglichen sie Google, ein einzigartiges Profil des Nutzers zu erstellen. Dieses Profil kann auf allen Webseiten, die Google-Dienste nutzen oder Daten an Google senden, zur Wiedererkennung des Nutzers führen. Datenschützer sind der Ansicht, dass Google die gesammelten Daten dauerhaft speichert und für Tracking-Zwecke verwendet.
Rückgang der Abmahnungen bei fehlerhafter Nutzung von Google Fonts
Das Urteil des LG München I im Jahr 2022 löste eine Flut von Rundmails aus, in denen vermeintlich betroffene Webseitenbesucher Schadensersatz von Betreibern und Unternehmern forderten. Der Vorwurf lautete, dass durch die Einbindung von Google Fonts IP-Adressen unbefugt an Google übermittelt und nicht angemessen geschützt wurden. Hauptsächlich zwei Anwaltskanzleien waren Absender dieser Abmahnungen. In den folgenden Gerichtsentscheidungen wurde jedoch eindeutig festgestellt, dass diese Klagen rechtsmissbräuchlich waren. Die Versendung der Mails zielte darauf ab, unter dem Deckmantel des Datenschutzes finanziellen Gewinn zu erzielen. Ab dem Frühjahr des letzten Jahres ebbten solche Abmahnwellen im Zusammenhang mit Google Fonts Nutzung daher ab.
Korrekte Einbindung von Google Fonts
Möchten Sie Google Schriftarten lokal auf Ihrer Webseite nutzen, ist es wichtig zuerst zu überprüfen, ob bereits Google Fonts eingebunden werden. Sollte dies der Fall sein, deaktivieren Sie diese zuerst. Ein wichtiger Hinweis dabei: Die Schriftarten könnten nicht nur durch das verwendete Template, sondern auch durch Plugins von Drittanbietern, wie beispielsweise Google Maps, geladen werden.
Überprüfung Ihrer Website auf Google Fonts Nutzung: Eine Schritt-für-Schritt-Anleitung für Google Chrome
Schritt 1
Zugriff auf die Entwicklerkonsole in Google Chrome. Klicken Sie dazu mit der rechten Maustaste auf eine beliebige Stelle der Webseite und wählen Sie „Untersuchen“ aus dem erscheinenden Menü. Alternativ können Sie auch die Tastenkombination verwenden: Für Mac ist es „Cmd + Option + J“ und für Windows „Strg + Umschalt + J“. Dies öffnet die Entwicklerkonsole, mit der Sie Ihre Website auf die Nutzung von Google Fonts überprüfen können.
Wählen Sie im Fenster der Entwicklerkonsole den Reiter „Sources“ oder „Quellen“ aus. In der linken Spalte, deren Anordnung je nach Einstellungen variieren kann, erhalten Sie einen Überblick über die Daten, die im Zusammenhang mit Ihrer Webseite geladen werden.
Wie Sie feststellen können, erfolgt das Laden der Schriftarten direkt über die Server von Google, erkennbar an den URLs „fonts.googleapis.com“ und „fonts.gstatic.com“.
Schritt 2
Nun stehen Sie vor zwei Möglichkeiten, die wir durchgehen werden.
Bei der ersten Option, falls Sie ein veraltetes oder Standard-Template verwenden, sollten Sie auf Ihrem FTP-Server nach der Datei „style.css“ suchen. Diese befindet sich gewöhnlich im Template-Ordner. Innerhalb der „style.css“-Datei suchen Sie nach einem Code-Schnipsel, der je nach genutzter Schriftart variiert, beispielsweise @import url('<https://fonts.googleapis.com/css2?family=Open+Sans&display=swap>');. Diese Zeile oder Zeilen müssen Sie löschen.
Bei der zweiten Option, wenn Sie ein modernes Template nutzen, sollten Sie in den Einstellungen des Templates nachsehen, ob es eine Funktion gibt, die „Google Fonts verwenden“ heißt. Finden Sie diese Option, setzen Sie den Schalter oder das Auswahlkästchen auf „Deaktivieren“.
Ein Tipp für WordPress-Nutzer
Sie haben die Möglichkeit, durch die Installation eines Plugins wie „Borlabs Font Blocker“ oder „Disable and Remove Google Fonts“ alle Google Fonts in Ihrem Template automatisch zu blockieren. Diese Plugins erleichtern den Prozess erheblich.
Allerdings ist es ratsam, Ihre WordPress-Instanz nicht mit zu vielen Plugins zu belasten, um die Serverleistung nicht unnötig zu strapazieren. Es ist oft besser, sich die Mühe zu machen und die entsprechenden Zeilen im Code manuell zu entfernen.
Die Lösung: Lokale Einbindung von Google Fonts
Nachdem Sie Ihre Google Fonts ausgewählt haben oder beschlossen haben, bereits vorhandene Schriftarten lokal zu nutzen, gibt es verschiedene Methoden, diese einzubinden. Während einige dieser Methoden spezifisch für Google Fonts konzipiert sind, bezieht sich die manuelle Einbindung auf jegliche Art von Web-Schriftarten, nicht ausschließlich auf Google Fonts.
Methode 1: Einsatz eines WordPress-Plugins
Beachten Sie, dass zusätzliche Plugins in Ihrer WordPress-Instanz die Ladezeiten der Seite verlängern können. Zwar ermöglicht die Einbindung über ein Plugin eine schnelle und einfache Lösung, doch führt dies zur Integration neuer Technologien in Ihre WordPress-Umgebung, die veralten können. Zudem beeinflussen die Plugins und ihre Funktionen die Ladezeit Ihrer Seite, da diese vom Server geladen werden müssen.
Ein Beispiel für ein solches Plugin ist OMGF. Es gibt viele weitere Optionen, aber OMGF dient hier als Orientierungspunkt. Die Einrichtung gestaltet sich relativ einfach: Nach der Installation erkennt das Plugin automatisch die Google Fonts und bindet sie lokal ein. Innerhalb des Plugins haben Sie zudem die Möglichkeit, nicht benötigte Schriftarten zu entfernen. Dieser Schritt ist jedoch optional.
Methode 2: Anpassungen in den WordPress-Theme-Einstellungen
Viele WordPress-Themes bieten integrierte Optionen zur Verwaltung von Web-Schriftarten, einschließlich Google Fonts. In den Theme-Einstellungen können Sie direkt auswählen, welche Schriftarten Sie nutzen möchten. Diese Funktion ermöglicht es, Google Fonts ohne zusätzliche Plugins lokal einzubinden, was die Performance Ihrer Website positiv beeinflussen kann. Überprüfen Sie die Dokumentation oder die Einstellungen Ihres Themes, um zu sehen, ob und wie Sie Schriftarten direkt anpassen können.
Methode 3: Manuelle Einbindung Schritt für Schritt
In diesem Abschnitt führen wir Sie durch den Prozess der manuellen Einbindung von Google Fonts. Wir erklären, wo Sie die Schriftarten herunterladen können, wie Sie diese auf Ihrem FTP-Server speichern, worauf Sie dabei genau achten müssen und wie Sie die Schriftarten schließlich über CSS so einbinden, dass sie korrekt auf Ihrer Website angezeigt werden. Obwohl wir das Divi Theme als Beispiel verwenden, ist der Vorgang ähnlich für andere Website-Builder oder Themes anwendbar.
Schritt 1: Nutzung des Google Webfonts Helper
Besuchen Sie die Website des Google Webfonts Helper. Falls Sie bereits eine bestimmte Web-Schriftart im Sinn haben, die Sie verwenden möchten, können Sie diesen Schritt überspringen. Andernfalls stöbern Sie durch das Angebot, um Ihre favorisierte Schriftart zu finden, oder nutzen Sie die Suchleiste, um gezielt nach einer bestimmten Schriftart zu suchen.
Wählen Sie den passenden Zeichensatz aus und entscheiden Sie sich für die Styles, die Sie nutzen möchten. Die Zahlen wie 500, 700 und so weiter bezeichnen die Schriftstärke („Font-weight“). Für unser Beispiel wählen wir die Schriftart Roboto. Falls Sie bereits eine Schriftart ausgewählt und über Googles Server eingebunden haben, die Sie weiterhin verwenden möchten, können Sie in der Entwicklerkonsole, wie im vorherigen Schritt beschrieben, überprüfen, welche Schriftart Ihre Website momentan nutzt.
Schritt 2: Schriftarten herunterladen und hochladen
Zuerst laden Sie die ausgewählte Schriftart herunter und bestimmen auf Ihrem FTP-Server einen geeigneten Speicherort, idealerweise im Verzeichnis des aktuell genutzten Themes, dass ist aber kein muss, in unserem Beispiel verwenden wir ein separates Verzeichnis “/wp-content/uploads/fonts”. Da “/wordpress/” unser Root-Verzeichnis ist, müssen wir dieses nicht im Pfad angeben, sondern wir beginnen direkt mit “/wp-content/..”. Anschließend übertragen Sie die Dateien in dieses Verzeichnis. So wissen Sie genau, wo die Dateien gespeichert sind, und können im nächsten Schritt den Pfad im Google Webfonts Helper korrekt angeben.
Schritt 3: Anpassen des Ordner-Prefixes
Geben Sie den zuvor gewählten Pfad genau so ein, dass er mit der URL übereinstimmt, unter der Sie Ihre Schriftarten hochgeladen haben. Nach dieser Anpassung können Sie den generierten CSS-Code kopieren und zum nächsten Schritt übergehen.
Schritt 4: Bearbeitung des CSS-Codes
In unserem Beispiel arbeiten wir mit dem Divi Theme, das einen integrierten CSS-Style-Editor bietet. Dieser Vorgang lässt sich jedoch ebenso auf jede „style.css“-Datei anwenden, die in Ihrem Template verwendet wird. Fügen Sie den zuvor kopierten CSS-Code in die „style.css“-Datei oder in den CSS-Style-Editor ein.
Beim Divi Theme gibt es eine Besonderheit zu beachten: Obwohl die Schriftarten nach der Einbindung des Codes geladen werden, müssen wir diese den verschiedenen Stilelementen noch zuweisen. Dieser Schritt stellt sicher, dass Ihre Website die neuen lokal gespeicherten Schriftarten auch tatsächlich verwendet.
Schritt 5: Schriftartzuweisung an Designelemente im CSS-Code
Jetzt, wo die Schriftarten lokal über Ihren Server geladen werden, ist der nächste Schritt, diese den verschiedenen Elementen wie H1, H2 usw. mit der korrekten Schriftstärke („Font-weight“) zuzuweisen. Dies erreichen Sie durch die Anwendung des folgenden Codes:
Hinweis
Sie können bestimmte Designelemente auch zusammenführen, diese Darstellung dient nur dazu jedes einzelne Element spezifisch zu gestalten falls es notwendig seien sollte. Als Beispiel, könnten sie auch h1, h2, h3 {font-family:Roboto, sans-serif; font-weight:700;} nutzen.
Schritt 6: Überprüfung der lokalen Einbindung
Um sicherzustellen, dass die Schriftarten nun korrekt lokal eingebunden sind, öffnen Sie erneut die Entwicklerkonsole, wie zu Beginn beschrieben. Überprüfen Sie, ob die Fonts erfolgreich von Ihrem Server geladen werden, ohne externe Anfragen an Google-Server zu senden. Diese Überprüfung hilft Ihnen, die vollständige Kontrolle über die Datenschutzkonformität und die Performance Ihrer Website zu gewährleisten.
“Das ist mir zu viel Arbeit und Plugins, im Ernst?”
Es ist verständlich, dass die manuelle Einbindung von Google Fonts zunächst als umfangreiche Aufgabe erscheint, insbesondere im Vergleich zur scheinbaren Einfachheit von Plugins. Doch als verantwortungsbewusster Webseitenbetreiber ist es wichtig zu erkennen, dass man sich nie vollständig auf Plugins verlassen sollte. Die manuelle Integration bietet Ihnen nicht nur mehr Kontrolle über Datenschutz und Seitenperformance, sondern stellt auch sicher, dass Sie DSGVO-konform agieren.
Falls Sie sich unsicher fühlen oder Unterstützung benötigen, sind wir von Evoting Media für Sie da. Egal, ob es um die lokale Einbindung von Fonts, Datenschutzbedenken oder Optimierung Ihrer Website geht – als moderne Online-Agentur stehen wir Ihnen mit Rat und Tat zur Seite. Sollten Sie Bedenken haben, dass Ihre aktuelle Agentur nicht den Datenschutzvorschriften gerecht wird und damit Risiken für Sie entstehen, bieten wir Ihnen eine risikofreie Alternative. Eine umfassende Überarbeitung Ihrer Website ist in diesem Kontext vielleicht in Betracht zu ziehen. Bei Evoting Media legen wir großen Wert auf DSGVO-Konformität, Flexibilität, Zuverlässigkeit, optimierte Ladezeiten, SEO und vieles mehr. Wir freuen uns auf Ihre Kontaktaufnahme und sind bereit, gemeinsam eine Lösung für Ihr Anliegen zu finden.