Select Page

Google Fonts Problematik

Google Fonts DSGVO konform lokal Hosten ohne Programmierkenntnisse

Gabriel Widemann | 27.08.2022

What should I do?

Aufgrund massenhafter Abmahnungen eines niederösterreichischen Anwalt hinsichtlich der DSGVO im Zusammenhang mit der Verwendung von Google Fonts, soll der folgende Blockbeitrag einen Überblick darüber geben, wie das Problem mit der CDN-Einbindung umgangen werden kann (vgl. Oberndorfer 2022). Da es in Deutschland zu einer Verurteilung aufgrund der externen Einbindung von Google Fonts gekommen ist, ist es wahrscheinlich nicht schlecht, auch in Österreich auf Nummer sicher zu gehen.

Entsprechende Informationen dazu finden Sie auch auf der Seite der WKO. In diesem Blockbeitrag geht es nur um das Umgehen der Problematik, nicht um technisches und rechtliches Hintergrundwissen. Ich übernehme zudem keine rechtliche Haftung oder Gewährleistung für die hier gelisteten Handlungsempfehlungen. Für die Inhalte der hier verlinken Seiten sind ausschließlich die entsprechenden Websitebetreiber bzw. Medieninhaber verantwortlich.

Ausgangsbedingungen
Diese Blogbeitrag richtet sich an WordPress Benutzer. Im folgenden Beispiel wird das meistgenutzte WordPress Theme Divi verwendet. Zur Einbindung der Google Fonts wird das Plugin „Use Any Font“ verwendet. Die Personal Lizenz kostet zur Zeit der Blogerstellung einmalig $ 9,99 für eine Website. Der hier gezeigte Lösungsweg ist aber auch für andere Themes ähnlich anwendbar.

Mit einigen weiteren Schritten und etwas CSS lässt sich das Problem auch kostenlos lösen. Hierzu empfehle ich den Beitrag von WPLIFT. Diesen Weg habe ich aber noch nicht durchprobiert. Divi bietet zudem die Mölgichkeit, Fonts im Builder upzuloaden. Diese Möglichkeit finde ich aber nicht sehr benutzerfreundlich. Trotzdem gerne hier der Artikel des Plugin-Herstellers WP-Zone. Im folgenden also der Lösungsweg mittels Use Any Font.

Ist meine Website betroffen?
Um das Herauszufinden, rufen wir unsere Website im Browser (hier Firefox) auf, machen einen Klick mit der rechten Maustaste auf die Website und wählen im nun erschienen Kontextmenü ‚Untersuchen‘. Es erscheint der Inspektor. Wählen wir den Tab ‚Netzwerkanalyse‘ und drücken die Taste F5 oder Strg+R um die Website neu zu laden. Am besten wählen wir jetzt noch bei den drei Punkten oben rechts ‚Eigenes Fenster‘, um alle Einträge zu sehen. Oben unter ‚Adressen durchsuchen‘ geben wir ‚gstatic’ ein. Sollte ein oder mehrere Einträge erscheinen, verwendet unsere Website externe Google-Fonts. Testen wir selbiges auch mit dem Schlagwort ‚google‘.

Use Any Fonts installieren
Use Any Fonts ist ein WordPress Plugin von Dness Carkey. Wenn wir nur eine Font verwenden, genügt die kostenlose Version des Plugins. Für mehere Fonts müssen wir  einen API-Key erwerben.

Um das Plugin zu installieren, rufen wir das Backend unserer WordPress Seite auf (mit /wp-admin in Ihrer Browserleiste, also z. B. https://www.gw-buchladen.at/wp-admin). Wählen wir Plugins, Add New und suchen nach ‚use any font‘. Anschließend installieren und aktivieren wir das Plugin. In der Seitenleiste sollte nun der neue Reiter Use Any Font hinzugekommen sein. Hier haben wir nun die Möglichkeit einen Lite API Key zu erstellen oder unseren erworbenen einzugeben.

Google Fonts identifizieren
In nächsten Schritt müssen wir ermitteln, welche Fonts wir brauchen. Dafür verwenden wir wieder den Inspektor. Klicken wir auf ein Wort unsrer Website mit der rechten Maustaste und wählen ‚Untersuchen‘. Bei ‚Regeln‘ rechts bei ‚Stile filtern‘ suchen wir nach ‚font-family‘. Die erst genannte Schriftart (in unserem Beispiel ‚Quattrocento‘) ist die entsprechende Font. Wiederholen wir den Vorgang für alle neuen Schriftarten. Mittels ‘Untersuchen’ können wir immer überprüfen, ob ein Wort, bei dem wir nicht sicher sind, ob wir die Schriftart schon notiert haben, eine andere Schriftart verwendet. Selbiges müssen wir auch für die Schriftschnitte beachten, also Fett, Kursiv usw. Hierzu können wir nach ‚font-weight‘ suchen. 400 entspricht Regular, 300 Light und 700 Bold.

Google Fonts Downloaden
Hierfür bietet sich der Google-Webfots-Helper von Mario Ranftl an. Suchen wir oben links die gewählte Font, wählen die Schriftschnitte (Select Styles) und downloaden das Zip-File. Nun können wir das Zip-File entpacken. Für uns sind nur die .woff (Web Open Font Format) von Interesse.

Google Fonts Hochladen
Zurück in WordPress und bei Use Any Font wählen wir ‚Upload Font‘. Als Font Name können wir einfach den Namen der Google Font wählen, also hier z. B. Quattrocento. Besitzen wir mehrere Schriftschnitte, können wir ‚Enable Font Weight Variation‘ anwählen und den gewünschten Schriftschnitt auswählen. Unter Schriftschnitte versteht man in der Typographie Fett, Kursiv, Dünn usw. Anschließend drücken wir den Upload-Button und wählen die entsprechende WOFF-Datei. Wollen wir einen weiteren Schriftschnitt hinzufügen, ist es wichtig, dass wir unter Font Name den selben Namen verwenden und dann unter Font-Weight einen anderen Schriftschnitt wählen. Wenn wir eine weitere Font uploaden wollen, wiederholen wir den hier genannten Vorgang, nur dass wir einen anderen Font Name wählen.

Die folgenden Schritte sind spezifisch für das Divi-Theme. In anderen Themes gibt es aber wahrscheinlich vergleichbare Arbeitsschritte. Beim populären Astra-Theme müssen wir jedenfalls ein bisschen in den Programmcode eindringen, auch wenn sich mit Kopieren und Einfügen wahrscheinlich alles Programmiertechnische erledigen lässt. Hierzu ein interessanter Blogbeitrag von „Blogging Commerce“.

Externe Google Fonts deaktivieren
Um die externen (rechtlich problematischen) Google Fonts zu deaktivieren, wählen wir in der WordPress Seitenleiste Divi/Theme Options und suchen den Eintrag ‚Use Google Fonts‘. Deaktivieren (Disabled) wir die Option. Nun sollte unsere Website ausschließlich Systemschriften und keine Google Fonts mehr verwenden.

Lokale Google Fonts verwenden
Nun müssen wir unerse lokal gehosteten Google Fonts noch anstatt der externen Google Fonts verwenden. Wählen wir hierzu in der WordPress Seitenleiste Aussehen (Appearance)/Customize. Im Customizer gehen wir zu General Settings/Typography und wählen unter Header Font und Body Font die entsprechenden Schriftarten. Sie werden normalerweise ganz oben auf der Schriftenliste gelistet. Wenn es keine manuellen Schriftartänderungen gibt, sollte unsere Website jetzt wieder die gewünschten Schriften verwenden.

Manuelle Schriftartänderungen
Alle Texte auf der Website, die nicht die ‚Default Theme Font‘ verwenden, müssen im Divi Theme Builder manuell geändert werden. Wir erkennen entsprechenden Text daran, dass sie optisch eine Systemschrift und nicht die von uns gewünschte Schriftart verwendet. Gehen wir hierzu in der WordPress Seitenleiste auf Seiten und wählen dann ‚Edit with the Divi Builder‘. Gehen wir in die Optionen des jeweiligen Textes, indem wir mit der Maus über die entsprechende Stelle fahren und dann das Zahnradsymbol anklicken. Unter Design Text bzw. Heading Text bzw. Button usw. können wir wiederum unsre Schriftarten auswählen. Hierzu sind Grundkenntnisse des Divi Builders von Vorteil.

Kontrolle, ob alles geklappt hat
Abschließend sollten wir den anfänglichen Test, der unter ‚Ist meine Website betroffen?‘ beschrieben worden ist, wiederholen. Nun sollten keine ‚gstatic‘ oder ‚google‘ Einträge vorhanden sein. Sollten trotzdem noch Google Einträge zu finden sein, kann das auch an der Verwendung von Google Maps oder Google reCAPTCHA liegen, z. B. wenn wir ein Kontaktformular damit absichern. Google reCAPTCHA ist jedenfalls rechtlich ein schwieriges Thema. Google Fonts sollten dann aber keine mehr dabei sein. Ansonsten hat einer der oben genannten Schritte bei uns nicht entsprechend funktioniert. Hat aber alles geklappt, dann sollte unsere Website zumindest bezüglich Google Fonts wieder vor etwaigen Abmahnungen hinsichtlich DSGVO sicher sein!

Abschließende Gedanken
Selbst mittels eines so konfortablen Plugins wie ‘Use Any Font’ ist das Umstellen von extern gehosteten Google Fonts zu lokal gehosteten für einen Laien keine triviale Angelegenheit. Ich hoffe dieser Blogbeitrag konnte hier etwas Abhilfe schaffen. Für jemanden mit Basiskenntnissen im ditigalten Bereich sollte es keine allzugroße Herausforderung sein. Aber wie gesagt, nicht für jeden ist es ein Kinderspiel und dass sollte von juristischer Seite auch bedacht werden. CDNs stellen für mich an sich einen technischen Fortschritt dar, der nicht durch überkritische Rechtssprechung auf Dauer ruiniert werden sollte.