Avada Google Fonts DSGVO-konform einbinden
Auch das Avada Theme bietet die dynamische Nutzung von Google Fonts für eine ansprechende Typografie. Zudem bietet Google Fonts eine große kostenlose Vielfalt von modernen Schriftschnitten. Aber da liegt leider das Problem, denn das dynamisierte Laden über die Google Font API Schnittstelle übermittelt die IP-Adresse des Besuchers ohne vorherige Zustimmung. Aus Datenschutzgründen sollten also Google Fonts nicht mehr dynamisch über den Google Dienst geladen werden, sonder lokal vom eigenen Webserver.
Inhalt
Die Nutzung von Google Fonts übermittelt personenbezogene Daten, wie die IP-Adresse des Besuchers an Google-Server in den USA. Dies ist nach den aktuellen DSGVO Bestimmungen nicht mehr zulässig. Schlimmer noch, es laufen zur Zeit sogar Abmahnungen mit Bußgeldern für die Nutzung von Google Fonts auf der eigenen Webseite.
Selbstcheck Google Fonts Scanner von e-recht24de:
Weitere aktuelle Berichte zu Google Fonts & DSGVO findest Du hier:
- https://www.heise.de/news/DSGVO-Abmahnwelle-wegen-Google-Fonts-7206364.html
- https://datenschutzbeauftragter-hamburg.de/2022/02/schadenersatz-fuer-den-einsatz-von-google-fonts-auf-der-webseite/
- Neue Abmahnungen RA Lenard wegen Google Fonts – wie richtig reagieren?
Doch keine Panik, es gibt verschiedene Möglichkeiten in Avada Google Fonts DSGVO-konform einzubinden. Alternativ kannst Du natürlich auch Systemschriften wie Arial oder Verdana für Deine Webseite nutzen. Das erspart Dir das zusätzliche nachladen von Webfonts und steigert Deine Ladegeschwindigkeit. Diese Entscheidung ist aber reine Geschmackssache bezüglich des Erscheinungsbildes Deiner Webseite. Nachfolgend zeige ich Dir eine Anleitung wie Du Google Fonts ersetzt oder sogar eigene Schriften von Deinem Webspace datenschutzkonform verwenden kannst.
Avada Google Fonts in den Theme Options
In den Theme Options des Avada Themes findest Du unter dem Punkt Datenschutz eine Einstellung zum laden von Google & Font Awesome Schriftarten. Die Einstellung „Lokal“ bewirkt, das die benutzen Google Fonts lokal auf Deinem Server herunterladen werden und von dort abgerufen werden. Die Einstellung „CDN“ hingegen lädt die Schriftarten dynamisch von dem Google Server. Dabei wird beim Besuch Deiner Webseite die IP-Adresse des Besuchers an den Google Server übermittelt.
Benutzt Du zusätzlich den mitgelieferten Revolution Slider, musst Du hier noch in den Global Settings unter Fonts die Einstellungen bezüglich der Nutzung von Google Fonts festlegen. Solltest Du weitere Plugins nutzen, die auf den Google Font Server zugreifen, solltest Du auch hier nach entsprechenden Einstellungen suchen.
Benutzte Avada Google Fonts im Theme finden
Im Folgenden zeige ich Dir, wie Du bereits genutzte Google Fonts finden und anschließend in eigene Webfonts umwandeln kannst. Im Anschluss kannst Du in den Theme Options – Typografie im den Bereich „Benutzer Schriftart“ (Custom Fonts) die benötigten Webfont-Dateien hochladen.
Diese Funktion ist übrigens ebenfalls sehr nützlich, wenn Schriftarten genutzt werden sollen, die nicht im Schriftenverzeichnis von Google Fonts aufgeführt sind. Zum aufspüren der bereits benutzen Google Fonts schaue zunächst in den Theme Options in die folgende Bereiche:
Typografie:
Global Typography, Body-Font und Headline-Fonts. Notiere Dir die Schriftarten. Auch die Schriftschnitte (z.B. normal, bold, 400, 300 etc.).
Avada Typografie – Body Fonts
Avada Typografie – Global Typography
Avada Typografie – Heading Fonts
Menü:
Solltest Du das Standard Menü des Avada Themes nutzen, notiere Dir auch hier die benutzte Schriftart inkl. Varianten. Ebenso die Schriftart unter dem Bereich „Mobile Menu Typography“. Solltest Du einen „Custom Header“ verwenden, schaue in den Layout Builder und kontrolliere die Einstellungen des Menü Elements zu den benutzen Schriftarten.
Fußzeile (Footer):
Auch für den Footer gibt Typografie Einstellungen zur verwendeten Schriftart und Varianten. Sollte bei Dir dort ein Hinweis bezüglich Layouts stehen, schaue im Bereich Layout Builder unter Global Footer.
Avada Builder Elements:
Auch für 2 Elemente des Fusion Builders gibt es separate Typografie Einstellungen: Das Button Element und das Toogle Element. Notiere Dir hier auch die Schriftart und Variante in den folgenden Avada Builder Elementen:
Avada Typografie Button Element
Avada Typografie Toggle Element
Google Fonts herunterladen
Auf der Seite Google Fonts (https://fonts.google.com/) kannst Du nach Deiner Schriftart suchen und die benötigten Schriftschnitte herunterladen. Klicke dazu zunächst auf den Namen der gesuchten Schriftart.
Scrolle dann zu den einzelnen Schriftschnitten (z.B. Regular 400, Bold 700). Neben dem jeweiligen Schriftschnitt klicke dann auf das + Zeichen. In der Seitenleiste siehst Du dann am unteren Bereich einen Download Button um die gewählten Schriftschnitte herunterzuladen.
Die Zip-Datei enthält dann die True Type Fonts Deiner gewählten Schriftart mit der Dateiendung .ttf.
Benötigte Webfont Formate online erstellen
Das Avada Theme benötigt für jede Schriftvariante 5 verschiedene Dateitypen: WOFF2, WOFF, TTF, EOT und SVG. Die Zip-Datei von Google Fonts beinhaltet nur den Dateityp .ttf. Die restlichen Dateitypen kannst Du online über einen kostenlosen Font-Konverter erstellen.
Schriften in Webfonts konvertieren auf der Seite transfonter.org
Dazu benutze ich z.B. den Service von transfonter.org. Lade dort einzelnen den gewünschten Schriftschnitt (ttf-Schriftdatei) hoch und erzeuge die zusätzlich benötigen Webfonts. Danach bekommst Du eine Zip-Datei mit den konvertierten Webfonts.
Custom Fonts im Avada Theme hochladen
Das Avada Theme bietet u.a. die Möglichkeit benutzerdefinierte Schriftarten zum Theme hochzuladen. Gehe dazu wieder zum Bereich Typografie – Benutzer Schriftart (Custom Fonts). Für jeden Schriftschnitt kannst Du einen eigenen Namen vergeben und anschließend die benötigten Webfont Formate hochladen.
Solltest Du beim Hochladen der Webfonts eine Fehlermeldung in der Mediathek bekommen, musst Du temporär die wp-config.php auf Deinem Webserver vorübergehend um diese Codezeile ergänzen:
Nach dem Upload der Webfonts solltest Du diese Codezeile aber unbedingt wieder entfernen. Eine nähere Anleitung zum upload von weiteren Dateitypen findest Du hier:
https://www.rietsch-design.de/wordpress-upload-weitere-dateitypen-erlauben.html
Google Fonts gegen Custom Fonts austauschen
Nachdem Du Deine eigenen Fonts installiert hast, geht es jetzt daran die Google Fonts auszutauschen. Dazu gehen zunächst in die Typografie Optionen und ersetze in den Schriftart Auswahlfeldern die Google Fonts durch Deine eigenen Fonts.
Führe diesen Schritt für jeden Bereich wie oben genannt durch. Zusätzlich solltest Du auch auf Deiner Seite ggf. die Headline und Textblock Elemente kontrollieren. Sowohl im Headline als auch im Textblock Element können individuelle Schriftfamilien ausgewählt werden. Korrigiere auch hier die Schriftarten mit Deinen eigenen Schriftschnitten.
Als letzten Schritt solltest Du in den Theme Options einmal den Avada internen Cache löschen. Diesen findest Du in den Theme Optionen unter dem Punkt Leistung (Performance) ganz am Ende. Leere auch den Cache von installierten Caching Plugins.
Kontrolle:
Um den Austausch der Google Fonts zu kontrollieren, öffne Deine Webseite am besten in einem Privat-Modus Browserfenster. Schalte dann den Inspektor Deines Webbrowsers ein (Firefox die Taste F12). Wähle im Inspektor den Bereich Netzwerkanalyse und den Tab „Schriften“ aus. Lade die Seite einmal neu und kontrolliere ob alle Fonts lokal von Deinem Server geladen werden.
Plugin zum deaktivieren oder blockieren von Google Fonts
Borlabs, das Unternehmen welches unter anderem das Bekannte Plugin „Borlabs Cookie“ vertreibt, stellt das kostenlose Plugin Borlabs Font Blocker zur Verfügung um Google Fonts Einbindungen in Themes und Plugins automatisch zu blockieren. Unter anderem deaktiviert das Plugin alle Google Fonts im Avada Theme.
Aber Achtung: Das Plugin kann allerdings aus techn. Gründen keine Fonts von externen Diensten wie Google Maps oder Google ReCaptcha blockieren.
Hallo Jörg,
vielen Dank für Deine wirklich super verständliche Anleitung. Wie kann ich mich dafür erkenntlich zeigen?
Kleiner Hinweis von mir. Der Link zum Borlabs Font Blocker hat bei mir nicht funktioniert. Und über die Plugin-Suche im WP habe ich ihn auch nicht gefunden. Ich war dann auf der Seite von Borlabs direkt. Hier der Link zum Download: https://borlabs.io/borlabs-font-blocker/.
Beste Grüße aus Hannover
Martin
Hallo Martin, vielen Dank für deinen Kommentar und Hinweis bezüglich Font Blocker Link. Link ist korrigiert.
Ich finde es komisch, dass Unternehmen sich beschweren und dabei aber oftmals Google Analytics ohne Einwilligung verwenden. Die Hälfte der Cookie-Banner funktioniert auch nur pseudomäßig.
Ich habe meine Seiten alle mit einem Google Font Checker geprüft und dann richtig eingebunden. Problem gelöst!
Google-Fonts-Checker: https://happyworx.de/google-fonts-checker
Danke für den Beitrag, weiter so :D
Hallo!
Vielen Dank für den Artikel. Als Laie frage ich mich, ob es nicht einfach genügt, in den Avada Theme Options auf „Lokal“ umzustellen? Oder müssen dennoch alle Fonts zusätzlich heruntergeladen werden?
Hallo Alex,
die Option auf Lokal umzustellen genügt in den meisten Fällen schon. Trotzdem sollte einmal in der Entwicklerkonsole des Browser überprüft werden, ob ggf. noch Schriften vom Google Server geladen werden. Dies ist z.B. beim Einsatz von Google Maps der Fall. Wer auf Nummer Sicher gehen will, kann die Schriftschnitte wie im Beitrag beschrieben in den Custom Fonts installieren.
Hallo Jörg,
vielen Dank für Deinen ausführlichen Beitrag.
Ich habe bei einer Kundenseite im Avada Theme Schritt für Schritt alles ausgeführt. Dennoch wirkt sich die Änderung nicht aus. Ich habe zusätzlich beide Plugins installiert OMGF und Borlabs. Keine Auswirkung. Nur wenn ich bei einem title statt h1… div auswähle und dann meine lokale Schrift wähle, funktioniert die Umstellung. Das allerdings wäre sehr mühsam. Hast Du eine Idee?
Hallo Werner,
die Global Fonts (Headings, Subheadings etc.) sind auch alle umgestellt auf die Custom Fonts? Sind in den individuellen Titel-Elementen jeweils eigene Angaben zu der benutzten Schriftart gemacht? Ansonsten kann ich so aus der Ferne ohne die Installation zu kennen nicht viel sagen.