Vor ein paar Monate wurde eine neue Abmahnwelle bekannt und natürlich habe ich auch darüber berichtet (Kommt lasst uns Deutsche abzocken!! Das wird ein Spass). Diese Abmahnwelle hat sich in den letzten Monate immer weiter verschärft und aus diesem Grund sind immer mehr Webmaster zu mir gekommen und haben mich gefragt wie man denn Google Font korrekt in die Webseite einbaut.
Damit ich mich nicht immer wiederholen muss – wie ihr wisst bin ich ein fauler Mensch – habe ich nun ein Video gemacht und werde hier unten auch noch eine Anleitung dafür schreiben. In diesem Beispiel werde ich nun beschreiben, wie man Google Font in WordPress einbaut welches DIVI als Pagebuilder verwendet. Ich werde dann in einer späteren Anleitung auch noch das ganze für das füdliblutte WordPress erstellen – denn da muss man einen anderen Weg nehmen.
Video
Anleitung
Wie oben erwähnt, funktioniert diese Anleitung nur wenn man DIVI mit WordPress verwendet, da wir hier die Funktionen von Divi anwenden.
Checken ob Google Font DSGVO konform eingebaut ist
Zuerst sollte man mal checken ob Google Font auf der eigenen Webseite bereits korrekt eingebunden ist. Ich verwende dafür gerne so einen Dienst wie den hier Google-Fonts-Checker.
Wenn also bei deinem Test folgendes auftaucht, dann musst du weiter die Anleitung abarbeiten.
Welches Google Font verwende ich?
In dem Resultat des Google Font Checker sieht mann dann auch, welche Google Font du gerade verwendest. Merk dir den Name!
Google Font herunter laden
Du kannst nun zu Google Font gehen und dort nach deiner Schrift suchen. Wenn du die Schrift geöffnet hast, findest du rechts oben einen Download Button und da kannst es dann herunterladen. Nachdem es heruntergeladen worden ist, kannst du nun das Zip File entpacken.
DIVI <-> Google Font Verbindung abstellen
Unter ≪DIVI≫ -> ≪Theme-Option≫ findest du unter Allgemein dann diese 2 Schaltflächen
Mit einem einfachen Klick kannst du nun die Schaltflächen umlegen damit es so aussieht (Speichern nicht vergessen)
Google Font in WordPress hochladen
Nun gehst du im Frontend hin und öffnest den Visual Builder und wählst dir ein Text-Modul aus und gehst unter ≪Design≫ -> ≪Text≫ und da findest du dann das Dropdown mit deinen Schriften. Du siehst nun das die Liste extrem kurz ist (das ist der Beweis, dass keine Google Font Verbindung mehr besteht). Nun kannst du unter hochladen klicken und das Google Font hochladen.
Sollte eine Fehlermeldung auftauchen, musst du mit dem wp-config Schritt gleich unten weitermachen. Sollte das Font aber ungehindert hochgeladen werden, dann musst du nur noch im ≪Theme-Customizer≫ die Default Fonts auf die neue hochgeladene Font umstellen.
wp-config Datei erweitern
Du hast also eine Fehlermeldung gesehen, die verhindert hat, dass du dein Google Font hochladen konntest. Nun musst du diese Sicherheitssperre kurz aushebeln und dafür gibst du nach dem WP_Debug Befehl folgender Befehl ein. Du musst dich also nun via FTP mit deinem Server verbinden und diese Datei herunterladen.
1 | define('ALLOW_UNFILTERED_UPLOADS', true); |
Danach speicherst du das wp-config File wieder und lädst es via FTP wieder hoch.
Google Font upload 2. Versuch
Nun kannst du wieder im Frontend versuchen das Google Font hochzuladen denn das sollte jetzt eigentlich funktionieren. Wenn es immer noch ein Problem gibt, dann hast du mit dem wp-config.php File was falsch gemacht und solltest das nochmal kontrollieren.
Hochgeladene Google Font mit Default Schrift verbinden
In DIVI arbeite ich immer mit der Default Schriftart und die definiert man im ≪Theme-Customizer≫, das solltest du jetzt noch machen. Wenn du aber nicht damit arbeitest, dann ignorier den Schritt und geh weiter.
wp-config.php Datei wieder updaten
Da wir ja eine Sicherheitssperre von WordPress mit dem neuen Befehl ausgehebelt haben, kann man jetzt eigentlich alle exotischen Dateifiles hochladen und das sollte man natürlich nicht tun. Aus diesem Grund sollte man nun die wp-config Datei nochmal öffnen und dann kannst du den Befehl am Anfang mit einem // Zeichen auskommentieren. Damit wird diese Zeile ignoriert aber man sieht sie immer noch und könnte sie wieder reaktivieren.
Sobald du alles so gemacht hast, ist dein DIVI WordPress nun DSGVO korrekt eingerichtet aber nur was die Google Font betrifft!
Vertrauen ist gut, Kontrolle ist besser
Ich sage immer Vertrauen ist gut aber Kontrolle ist besser, aus diesem Grund solltet ihr vielleicht nochmal bei Google-Fonts-Checker vorbei gehen und die Domain nochmal kontrollieren. Wenn es wieder Rot ist, dann hat du einen Fehler gemacht und einen Punkt in dieser Anleitung vergessen.
Wenn es aber Grün ist wie hier, dann hast du alles korrekt gemacht und die Verbindung von deinem DIVI WordPress zum Google Font Server ist unterbrochen und somit ist in dieser Sache alles DSGVO korrekt eingerichtet.
Fazit
Wie ihr nun gesehen habt, auch wenn es furchtbar kompliziert klingt – die Google Font Sache ist eigentlich relativ einfach gelöst und jetzt müsst ihr keine Angst mehr haben, dass euer Konkurrent euch um 200€ erleichtert…
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 😀
ja so ein nervtötender cookiebanner muss man halt auch korrekt einbinden, so das man tracking ausschalten kann usw. leider sind dabei so viele dieser plugins so kompliziert, dass man fast ein raketenwissenschaftler sein muss um es zu verstehen
Lieber Eric
Mit grosser Begeisterung bin ich auf Deinen YouTube Kanal und Deinen Blog gestossen! Vorab möchte ich Dir ein grosses Kompliment für Deine Arbeit aussprechen, welche mir bereits einige Male geholfen hat.
Als blutiger Anfänger in Webdesign und WordPress, habe ich in den letzten Monaten ein intensives Selbststudium betrieben, um meine erste Homepage für meinen Sportverein zu gestalten – ich habe wirklich bei absolut 0,0 angefangen. In der finalen Phase angelangt und somit beim Datenschutz, bin ich auf Deinen Hinweis betreffend Google Fonts aufmerksam geworden, was echt super hilfreich war!
Allerdings gibt es trotz Deiner Anleitung ein Problem, welches ich nicht selber lösen konnte, folgend die Details:
– alles wie in der Anleitung gemacht
– Google Font Family: Montserrat
– in Divi Google Fonts ausgestellt
– WP-Config File via WP File Manager PlugIn direkt in WP Dashboard angepasst gemäss Anleitung
– neue Schriftart manuell eingebunden
– Check auf „sicher3.de“ gemacht
– Fehlermeldung erhalten aufgrund einer ganz anderen Schriftart, welche ich nirgends ausgewählt oder verwendet habe (alles gecheckt)
Folgende Fehlermeldung wird angezeigt:
Details zu den gefundenen Aufrufen von Google-Fonts (Stylesheet oder Font):
Anzahl der Aufrufe: 2
Auflistung der Aufrufe:
Font – https://fonts.gstatic.com/s/roboto/v18/kfomcnqeu92fr1mu4mxk.woff2
Font – https://fonts.gstatic.com/s/roboto/v18/kfolcnqeu92fr1mmeu9fbbc4.woff2
Roboto wurde nie verwendet und ich konnte nicht herausfinden wie und wo ich dieses Problem lösen kann.
Da ich nicht mehr weiter weiss, wende ich mich nun an Dich in der grossen Hoffnung, dass Du mir vielleicht weiterhelfen kannst…
Danke für Deine geschätzte Rückmeldung.
Liebe Grüsse R
schön zu sehen das du dich in das thema einarbeitest. ich kann dir natürlich nicht mit gewissheit sagen, wo du ein fehler gemacht hast. ffür mich klingts so als ob du in dem theme customizer bei den foots was eingestellt hast oder sonst irgend in einem theme modul. check da mal – evlt findest ja was
Danke für die Rückmeldung Eric
Die letzten Tage habe ich mir viele Stunden den Kopf darüber zerbrochen und pausenlos recherchiert. Zu erwähnen ist hierbei, dass ich keinerlei Programmier- und/oder Websiten-Analysekenntnisse verfüge und die Isolierung eines solchen Problems für andere sicherlich deutlich schneller gehen würde.
„long story short“
Über „RMB – Untersuchen“ auf der Website selber konnte ich nach unzähligem (meist unbewusstem) herumklicken in diesem Irrgarten von überwältigend vielen Informationen das Problem schlussendlich finden.
Ich habe auf meiner Website über das Video Modul von Divi ein YouTube Video als Link eingebunden. Dabei war mir zwar das ganze Google Thema mit Datentransfer durchaus bewusst (ist der nächste Punkt auf der To Do Liste), allerdings wusste ich nicht, dass allein über den Link bereits die Google Font „Roboto“ irgendwie mit eingebunden wird!? (WTF)
Allenfalls ist das für Experten absolut logisch, für mich als Laie eher unbegreiflich 😅
Nach der Entfernung des Links habe ich die Seite nochmals getestet. Und ja, es war demnach wirklich die YouTube Verlinkung – Problem demnach gelöst.
Jetzt folgt die nächste Challange für mich:
– Video irgendwie anders einbinden
– Google Maps HTML Karteneinbindung irgendwie anders einbinden
Dann sollte es mit dem Datenschutzthema zumindest was Google betrifft eigentlich passen.
liebe Grüsse
Wenn du wirklich Youtube Videos DSGVO korrekt einbinden willst, dann hast du 2 Möglichkeiten – entweder sie einfach zu verlinken oder erst anzeigen lassen wenn der User bewusst darauf klickt. Ich habe hier mal ein Plugin gemacht. damit kannst du die Videos mit Shortcodes einbinden, und der User sieht erst das Bild aka Thumbnail das du bei dir hochlädst. erst wenn er darauf klickt, kommt das video: https://wordpress.org/plugins/dsgvo-youtube/
Super, vielen Dank Eric 👍
ja bitte schön und viel erfolg
Hallo Eric-Oliver, ich hätte nur eine Frage, bin halt quasi ein Newbi. Da die meisten Schriften mehrere Dateien enthalten, muss ich dann jede Datai einzeln hochladen
Hoi Roland – ja genau. du hast eine datei für dicke schrift, eine für dünne, eine für kursive usw…. das sind alles einzelne ttf oder otf files die du hochladen musst und dann natürlich noch korrekt im css verknüpfen.