Webdesign

Google Fonts DSGVO konform in WordPress einbinden

Google Fonts DSGVO konform in WordPress einbinden

Google-Fonts-DSGVO-konform-Wordpress-einbinden

Fast jedes Unternehmen hat eine Webseite, doch wie kommt die Schrift auf den Bildschirm? Früher musste man Schriften auf den Server hochladen, doch dann kamen die Google Fonts und man konnte seiner Kreativität in Sachen Typografie freien Lauf lassen.

Wäre da nicht die kürzlich in Kraft getretene Datenschutz-Grundversorgung (DSGVO)… Jegliche Google Dienste sind hier kritisch zu betrachten. Inwiefern die Verwendung von Google Fonts rechtswidrig ist, muss aber erst ein Urteil entscheiden. Ein Angriffspunkt könnte sein, dass beim Laden der Seite der Google-Server angesteuert wird und damit eventuell personenbezogene Daten an Google übermittelt werden könnten. Deshalb empfehlen wir die verwendeten Google Fonts auf dem eigenen Server einzubinden.

 

Google Fonts, WordPress & die Verwendung von Themes

Viele WordPress-Webseiten basieren auf sogenannten Themes. In diesen werden fast immer Google Fonts eingebunden, damit man die eigene Webseite individueller gestalten kann. Das ist zwar praktisch um erst einmal eine Schrift zu finden, aber am Ende auch wieder unnötig. Zudem optimiert man die Ladezeit der Webseite, wenn nicht ständig der Google Server angesteuert werden muss. Es spricht demnach also nicht nur die DSGVO für die Einbindung von Webfonts, sondern auch die Ladezeit.

 

Google Fonts ersetzen – Step by Step

Als erstes sollte man klären welche Schriften auf der Seite überhaupt verwendet werden. Dafür können wir die Chrome Browser Erweiterung “FontFace Ninja” empfehlen. In Sekundenschnelle kann man die verwendeten Schriften ohne Programmierkenntnisse auslesen.

google-font-helper1. Google Font als Webfont herunterladen

Nun wissen wir, welche Schrift auf der Webseite benutzt wird. Wo bekommen wir nun die Google Fonts als normale Webfont her? Dabei hilft uns der Google Webfont HelperEinfach nach der gewünschten Schrift suchen und die Schriftschnitte auswählen.

 

2. Webfonts herunterladen & auf eigenen Server einbinden

Auf der Seite findet man auch alle benötigten Webfonts als ZIP. Diese werden entpackt und an entsprechender Stelle auf den Server geladen (am besten via FTP). Am einfachsten geht es, wenn man einen neuen Ordner “fonts” im Hauptverzeichnis anlegt, dann muss auch die durch den Google Fonts Helper vorgegebene Pfadstruktur im CSS Code nicht angepasst werden.

google-font-helper-ZIP-Webfonts-downloaden

 

google-font-helper-CSS-Code-kopieren3. CSS Code kopieren

Der benötigte CSS Code zum Einbetten der Webfont wird ebenfalls gleich mit geliefert und muss nur noch in die CSS Datei der eigenen Webseite kopiert werden. Diese Datei befindet sich normalerweise im Ordnerpfad: wp-content > theme > “DeinChildTheme” und heißt in den meisten Fällen “style.css”.

 

4. Google Fonts Abfrage vom Server blocken

Nachdem wir die Schriften hochgeladen und den CSS Code angepasst haben, müssen wir natürlich die Verbindung der Webseite zum Google Server blockieren, sonst wird die Schrift weiterhin abgerufen und damit Daten von Webseitenbesuchern an Google übertragen.

Dabei hilft uns ein Plugin oder ein Programmierer 😉 Nehmen wir mal das Plugin: Remove Google Fonts Preferences. Nach dem Installieren aktivieren wir es einfach. Mehr muss hier nicht getan werden.

google-server-testIm Browser kann im Anschluss überprüft werden, ob die Verbindung zum Google Server wirklich blockiert wurde. Dazu klickt man im Browser mit der rechten Maustaste irgendwo auf die Seite und wählt “Untersuchen” aus. Unter dem Reiter “Sources” werden alle extern angesteuert Server angezeigt. Die Google Font Server sollten jetzt nicht mehr zu sehen sein.

Nun werden die angezeigten Schriften vom eigenen Server geladen. Das spart Ladezeit und Diskussionen mit einem Anwalt zum Thema Google Fonts. 🙂

The following two tabs change content below.

Julia

Hallo, ich bin Julia und unterstütze das Team der Klickkomplizen seit August 2015 im Bereich Web- und Printdesign. Mein Herz schlägt für Photoshop und InDesign und somit auch für Neuheiten und Trends in diesem Bereich.
Smartspeaker Daten könnten von #Facebook und #Google für Werbung genutzt werden! 🕵‍♂ - Persönliche User-Daten für… https://t.co/26oLpVjvQb
💫Social Media-Universum 2018 – Konkurrenz für #Facebook und #Youtube ?🌘 Alle Social Media Big Player als Planeten… https://t.co/TfjKF2CqYY
"Bis zu 60%" – Werbetreibende verschieben riesige Budgets von #Google zu #Amazon Vorteile: - Nutzerdaten aus Kaufv… https://t.co/V9omx6e7JT
NEU im #Klickkomplizen Blog: Google Ads - Benutzerdefinierte Zielgruppen erstellen! Alle Tipps und Tricks für noc… https://t.co/ZaYrFKxnSf
DSGVO vs. Personalisierte Werbung – Zwischen Personalisierung & Datenmissbrauch! Neustart für Marketing? - Maßna… https://t.co/ypnjXFs4jb
Online-Studie von ARD und ZDF: Über 90 Prozent in Deutschland online – und zwar deutlich länger! ⏰ - 1 Mio. Nutzer… https://t.co/znegBmbRsW
NEU im #Klickkomplizen Blog: Nützliche Browsererweiterungen für Designer! 🛠 Diese AddOns helfen weiter: - Fontfac… https://t.co/noVkyArqNX
3D Fotos im #Facebook Newsfeed: Details, Vorgaben, Tutorial und Tipps! 📸 3D Foto erstellen und auf Facebook posten… https://t.co/2q4hdVymXq
3,4 Mio. Impressions mit nur einem Post: Der neueste Reichweiten-Trick bei #Facebook! Algorithmus unterstützt "Mea… https://t.co/IW88cfzOg0
AllFacebook Marketing Conference 2018 - 5 Bühnen, 40 Talks und 50 Speaker! 👍 Alles über: - DSGVO - Facebook Zielgr… https://t.co/TJGNqt21b1
#YouTube Werbung nach Suchanfragen ausspielen? 🔎🎞 Google nutzt YT Suchfunktion für Ads mit Performance-Potential.… https://t.co/1kiu6J3On4
Leitfaden: Hintergründe bei #PowerPoint und #Photoshop entfernen! ✂ Schritt für Schritt Anleitung mit Beispielen -… https://t.co/CkbkN4gfvq
Einen ansprechenden Marketing-Lebenslauf erstellen! 📝 Auf diese 9 Dinge kommt es an: - Länge - Formatierung - Sch… https://t.co/TYPcm2Ia5o
NEU im #Klickkomplizen Blog: Website-Relaunch Linkstruktur & Weiterleitungen! 🌐 Das ist zu beachten: - URLs in S… https://t.co/NxhmB1a2yK
🙋‍♀️#Facebook - "Freunde in der Nähe" im Test!🙋‍♂️ Interaktive Karte mit Events, Chek-Ins & Empfehlungen von Freun… https://t.co/KtOfwQ1UoH
Jetzt NEU! #Facebook Badges für "Top-Fans" 🥇 Besondere Kennzeichnung in der Commnity. Top Fan: - besonders engag… https://t.co/pUGr5eJHn4
NEU im #Klickkomplizen Blog: Was hat uns bewegt - September 2018! 👋 Was war los in der Online- und Offline-Welt?… https://t.co/fiLzO1ZLmq
#Instagram Geo-Targeting von Posts und Stories im Test! 🛰 Location „Targeting“ Funktion für Instagram Posts und St… https://t.co/8ocCJE2rEh
NEU im #Klickkomplizen Blog: #Instagram Story Reposts - Fremde Beiträge in der eigenen Story teilen! 📸 Wie es funk… https://t.co/95a0ei8JDH
#SnapChat und #Amazon kooperieren über Visual Search in der App! 📱 In SnapChat gezeigte Produkte können direkt übe… https://t.co/WB4K8N9JnE
Share This