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

Illustration Prinzip Google Fonts API

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:

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.

Datenschutz Einstellungen Avada Theme

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 Body Fonts

Avada Typografie – Body Fonts

Avada Globals Typography

Avada Typografie – Global Typography

Avada Typgrafie Heading Fonts

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.

Avada Menu-Typografie

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 Footer Typografie Optionen

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:

Typografie Button Element

Avada Typografie Button Element

Typografie Toggle Element

Avada Typografie Toggle Element

Google Fonts herunterladen

Google Fonts

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.

Transfonter Webfonts Konverter

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.

Avada Custom Fonts

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:

wp-config-Codezeile

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.

Avada Benutzer Schriftarten

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.

Browser Inspektor

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.