{"id":250041,"date":"2022-06-06T22:10:01","date_gmt":"2022-06-06T18:10:01","guid":{"rendered":"https:\/\/cs-webdesigns.com\/?p=250041"},"modified":"2024-05-28T11:33:34","modified_gmt":"2024-05-28T07:33:34","slug":"use-google-fonts-dsgvo-compliant-in-divi","status":"publish","type":"post","link":"https:\/\/cs-webdesigns.com\/en\/webinsights\/tutorials\/divi\/google-fonts-dsgvo-konform-in-divi-verwenden\/","title":{"rendered":"Integrate GDPR-compliant Google Fonts in Divi and use them locally"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8220;1&#8243; admin_label=&#8220;section&#8220; _builder_version=&#8220;4.17.4&#8243; custom_margin=&#8220;||||false|false&#8220; custom_padding=&#8220;0px||||false|false&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_row admin_label=&#8220;row&#8220; _builder_version=&#8220;4.17.6&#8243; background_size=&#8220;initial&#8220; background_position=&#8220;top_left&#8220; background_repeat=&#8220;repeat&#8220; custom_padding=&#8220;||||false|false&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_column type=&#8220;4_4&#8243; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;|||&#8220; global_colors_info=&#8220;{}&#8220; custom_padding__hover=&#8220;|||&#8220;][et_pb_text _builder_version=&#8220;4.17.6&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; custom_margin=&#8220;||10px||false|false&#8220; custom_margin_tablet=&#8220;80px||||false|false&#8220; custom_margin_phone=&#8220;60px||||false|false&#8220; custom_margin_last_edited=&#8220;off|phone&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h2>Google Fonts und die DSGVO: Warum du Schriftarten lokal hosten solltest<\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.17.4&#8243; _module_preset=&#8220;default&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p>Wenn du dich ein wenig mit der <strong>DSGVO und dem TTDSG<\/strong> auseinandersetzt, wirst du mit Sicherheit darauf sto\u00dfen, dass auch die Verwendung von Google Fonts zum Datenaustausch mit den USA (Drittland im Bezug auf Datenschutz) f\u00fchrt und das ohne Einwilligung <strong>nicht datenschutzkonform<\/strong> ist.<\/p>\n<p>H\u00e4ufiges unbewusstes Problem ist h\u00e4ufig bereits das verwendete <strong>WordPress-Theme<\/strong> oder <strong>Plugin.<\/strong> Diese verwenden nicht selten Google Fonts als Schriftart. Das ist nat\u00fcrlich bequem, in Europa jedoch rechtswidrig.\u00a0<\/p>\n<p>Einfachste und beste L\u00f6sung dagegen ist es, die <span>Google Fonts in Divi lokal einzubinden<\/span>, also auf dem eigenen Server speichern. Google Fonts lassen sich sehr einfach herunterladen und m\u00fcssen dann nur noch korrekt eingebunden und verwendet werden. Das l\u00e4sst sich in nur wenigen Schritten umsetzen.\u00a0<\/p>\n<p>Wie du hierf\u00fcr genau vorgehen musst, zeige ich dir jetzt Schritt f\u00fcr Schritt am Beispiel mit dem Theme &#8222;Divi&#8220; von <a href=\"https:\/\/elegantthemes.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">ElegantThemes<\/a>.\u00a0<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.24.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; custom_margin=&#8220;||10px||false|false&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h2>Warum sind Google Fonts nicht datenschutzkonform?<\/h2>\n<p>[\/et_pb_text][dsm_icon_list icon_font_size=&#8220;20px&#8220; text_indent=&#8220;10px&#8220; _builder_version=&#8220;4.24.0&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;][dsm_icon_list_child text=&#8220;\u00dcbertragung der IP-Adresse (= personenbezog. Daten)&#8220; font_icon=&#8220;&#xf505;||fa||900&#8243; _builder_version=&#8220;4.24.0&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;][\/dsm_icon_list_child][dsm_icon_list_child text=&#8220;Einfache L\u00f6sung: Google Fonts lokal hosten bzw. verwenden&#8220; font_icon=&#8220;&#xf0a4;||fa||900&#8243; _builder_version=&#8220;4.24.0&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;][\/dsm_icon_list_child][\/dsm_icon_list][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; custom_margin_tablet=&#8220;80px||||false|false&#8220; custom_margin_phone=&#8220;60px||||false|false&#8220; custom_margin_last_edited=&#8220;off|desktop&#8220; custom_padding=&#8220;||||false|false&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h2>Google Fonts in Divi lokal hosten und einbinden &#8211; ohne Plugin<\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; custom_margin=&#8220;||0px||false|false&#8220; custom_margin_tablet=&#8220;80px||||false|false&#8220; custom_margin_phone=&#8220;60px||||false|false&#8220; custom_margin_last_edited=&#8220;off|desktop&#8220; custom_padding=&#8220;||||false|false&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h3>Download der gew\u00fcnschten Google Font<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.21.2&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p style=\"text-align: left;\">Die Google Schriftarten stehen unter <a href=\"https:\/\/fonts.google.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">https:\/\/fonts.google.com<\/a> kostenlos zum Download zur Verf\u00fcgung.<\/p>\n<p style=\"text-align: left;\"><strong>Tipp: Verwende eine variable Schriftart<\/strong>, da diese &#8211; wie der Name vermuten l\u00e4sst &#8211; in allen Varianten funktionieren. Wie du in <a href=\"https:\/\/fonts.google.com\/variablefonts\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">dieser Auflistung<\/a> siehst, sind die meisten Google Fonts variabel verf\u00fcgbar.<\/p>\n<p>\u00dcbrigens: Google hat mittlerweile auch Icons im Portfolio: <a href=\"https:\/\/fonts.google.com\/icons\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">https:\/\/fonts.google.com\/icons.<\/a><\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; custom_margin=&#8220;||0px||false|false&#8220; custom_margin_tablet=&#8220;80px||||false|false&#8220; custom_margin_phone=&#8220;60px||||false|false&#8220; custom_margin_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h3>Google Font bzw. Schriftarten in Divi hochladen<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.21.2&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p>Divi macht es dir sehr einfach, eigene Schriftarten hochzuladen und diese dann global auf der Webseite zu verwenden.<\/p>\n<p>Daf\u00fcr musst du lediglich im Divi Builder bei einer beliebigen Seite in die Einstellungen eines Moduls navigieren und dort im Reiter Design den Umschalter &#8222;Text&#8220; aufklappen. Dort findest du die Einstellung &#8222;Text Schriftart&#8220; und kannst durch einen Klick auf &#8222;Hochladen&#8220; eigene Schriftarten hochladen.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-254436 size-full\" src=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Variable-Schriftart-in-Divi-hochladen.png\" alt=\"Variable Google Font in Divi hochladen\" width=\"354\" height=\"500\" \/><\/p>\n<p>Dort w\u00e4hlst du nun die zuvor heruntergeladene Schriftart im tff- oder otf-Format aus, benennst sie mit dem wirklichen Namen und klickst auf hochladen.<\/p>\n<p>H\u00e4ufig erscheint hier folgende Fehlermeldung &#8222;<strong>Dateityp wird aus Sicherheitsgr\u00fcnden nicht unterst\u00fctzt.<\/strong>&#8220; oder &#8222;<strong>Dateityp aus Sicherheitsgr\u00fcnden unzul\u00e4ssig.<\/strong>&#8222;. Auch daf\u00fcr gibt es eine einfache L\u00f6sung.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-254440 size-full\" src=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Unzulaessiger-Dateityp-Upload-.png\" alt=\"Unzula\u0308ssiger Dateityp Upload\" width=\"426\" height=\"300\" \/><\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; custom_margin=&#8220;||0px||false|false&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h3>L\u00f6sung f\u00fcr das Problem &#8222;Dateityp unzul\u00e4ssig bzw. nicht unterst\u00fctzt&#8220;<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p>Um den Upload der Schriftart freizugeben musst du <strong>vor\u00fcbergehend <\/strong>die <strong>wp-config.php<\/strong> in deinem WordPress-Verzeichnis um eine Codezeile erweitern.<\/p>\n<p>Navigiere dazu \u00fcber einen FTP-Client deiner Wahl (z.B. <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">FileZilla<\/a>), deinen Host (z.B. <a href=\"https:\/\/wp-space.de\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">WP Space<\/a>) oder WordPress-Plugin (z.B. <a href=\"https:\/\/de.wordpress.org\/plugins\/wp-file-manager\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">WP Dateimanager<\/a>) in das Hauptverzeichnis deiner WordPress-Installation und \u00f6ffne die Datei wp-config.php (mit einem Editor wie z.B. <a href=\"https:\/\/brackets.io\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Brackets<\/a>).<\/p>\n<p>Dort muss <strong>vor\u00fcbergehend<\/strong> eine Zeile Code eingef\u00fcgt werden:<\/p>\n<p>[\/et_pb_text][et_pb_code _builder_version=&#8220;4.25.1&#8243; _module_preset=&#8220;default&#8220; background_color=&#8220;#E3E3E3&#8243; text_orientation=&#8220;center&#8220; max_width=&#8220;500px&#8220; max_width_tablet=&#8220;450px&#8220; max_width_phone=&#8220;none&#8220; max_width_last_edited=&#8220;on|phone&#8220; custom_padding=&#8220;20px||20px||true|false&#8220; custom_padding_tablet=&#8220;|||10px|true|false&#8220; custom_padding_phone=&#8220;|||0px|true|false&#8220; custom_padding_last_edited=&#8220;off|desktop&#8220; hover_enabled=&#8220;0&#8243; border_radii=&#8220;on|10px|10px|10px|10px&#8220; global_colors_info=&#8220;{}&#8220; sticky_enabled=&#8220;0&#8243;]define( &#8218;ALLOW_UNFILTERED_UPLOADS&#8216;, true);[\/et_pb_code][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p>Dieser Befehl erlaubt dir nun das Hochladen deiner Schriftarten, wie im vorherigen Absatz beschrieben.\u00a0<\/p>\n<p>Nachdem du nun die Schriftart hochgeladen hast, <strong>l\u00f6sche den Befehl wieder aus der wp-config.php<\/strong>!<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; custom_margin=&#8220;||0px||false|false&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h3>Einf\u00fcgen des CSS aus dem Google Webfontshelper<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.17.6&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p>Nachdem die Google Schirftart auf deinem Server liegt, muss bei Google Fonts noch der dazugeh\u00f6rige CSS-Code in der style.css eingef\u00fcgt werden. Keine Sorge, auch das ist <strong>nur copy &amp; paste<\/strong>.<\/p>\n<p>Wenn du die Schriftart wie beschrieben hochgeladen hast, findest du deine Schriftarten im folgenden Pfad deiner WP-Installation: <strong>\/wp-content\/uploads\/et-fonts\/<\/strong><\/p>\n<p>Diesen f\u00fcgst du beim <a href=\"https:\/\/google-webfonts-helper.herokuapp.com\/fonts\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Google Webfontshelper<\/a> bei &#8222;Customize folder prefix&#8220; ein. Daraufhin setzt das Tool deinen Pfad in den CSS-Code und du musst dir diesen nur kopieren (Windows: STRG + C oder Mac: CMD + C).<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-251070 size-full\" src=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Google-Fonts-Webhelper-1.jpg\" alt=\"Google Fonts Webhelper\" width=\"1000\" height=\"361\" srcset=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Google-Fonts-Webhelper-1.jpg 1000w, https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Google-Fonts-Webhelper-1-980x354.jpg 980w, https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Google-Fonts-Webhelper-1-480x173.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1000px, 100vw\" \/><\/p>\n<p>Diesen Code m\u00fcssen wir am Ende der Style.css einf\u00fcgen und speichern. Wenn du ein <strong>Child Theme<\/strong> verwendest, f\u00fcge ihn dort (wp-content\/themes\/child-theme-name) in die style.css ein. Verwendest du kein Child-Theme, f\u00fcge das CSS im Haupttheme-Ordner \/wp-content\/themes\/divi ein.<\/p>\n<p>Das war es auch schon. Damit hast du deine Schriftart lokal eingebunden. Wenn du mehrere Schriftarten verwendest, wiederhole diesen Vorgang einfach.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; custom_margin=&#8220;||0px||false|false&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h3>5. Deaktiviere die Verwendung von Google Fonts in den Divi Theme-Optionen<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.17.4&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p><span style=\"font-size: 20px;\">Du kannst in den Divi-Einstellungen die Verwendung von Google Fonts direkt deaktivieren. Navigiere dazu in die Theme-Optionen &#8211; Allgemein und deaktiviere die Option &#8222;Google Schriftarten verwenden&#8220;.<\/span><\/p>\n<p>Achtung, die \u00dcbersetzung ist ein wenig irref\u00fchrend. &#8222;Deaktivieren&#8220; darf hier als &#8222;Deaktiviert&#8220; gelesen werden. Die Einstellung sollte also so aussehen:<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-250052 size-full\" src=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Google-Schriftart-in-Divi-deaktivieren.png\" alt=\"Google Schriftarten in den Divi Einstellungen deaktivieren\" width=\"710\" height=\"46\" srcset=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Google-Schriftart-in-Divi-deaktivieren.png 710w, https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Google-Schriftart-in-Divi-deaktivieren-480x31.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 710px, 100vw\" \/><\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; custom_margin=&#8220;||0px||false|false&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h3>6. Pr\u00fcfe, ob deine Schriftarten wirklich lokal verwendet werden<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p>Zu guter Letzt sollten wir abschlie\u00dfend pr\u00fcfen, ob deine Seite auch wirklich nirgends mehr Google Fonts verwendet (Achtung: Teilweise verwenden Plugins Google Fonts. Viele Plugins wie MailPoet stellen dir das aber mittlerweile zur Auswahl.).<\/p>\n<p>Daf\u00fcr kannst du ein Tool wie <a href=\"https:\/\/www.e-recht24.de\/google-fonts-scanner\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">www.e-recht24.de\/google-fonts-scanner<\/a>, Plugins wie im n\u00e4chsten Kapitel beschrieben verwenden oder auch durch wenige Klicks manuell in den Entwicklertools deines Browsers.<\/p>\n<p>Daf\u00fcr solltest du deine Webseite im Inkognito- bzw. Privatmodus \u00f6ffnen. Sobald die Seite ge\u00f6ffnet, gelangst du via Rechtsklick und Auswahl von &#8222;Durchsuchen&#8220; oder noch einfacher, per F12-Taste in die Entwicklertools.<\/p>\n<p>Dort findest du einen Reiter &#8222;Network&#8220; und darunter die Auswahl &#8222;Font&#8220;. Dort werden dir alle Schriftarten angezeigt, die auf der aufgerufenen Website angezeigt werden. Achtung: Damit dir die Schriftarten angezeigt werden, musst du die Seite nochmal <strong>neu laden<\/strong> (F5-Taste).<\/p>\n<p>Danach werden dir alle verwendeten Schriftarten aufgelistet. Hier sollte in der Spalte &#8222;Domain&#8220; die eigene Domain stehen. Steht hier etwas anderes, musst du nochmal pr\u00fcfen, wo diese Schriftart noch eingesetzt wird und dort ebenfalls die lokale Schriftart verwenden.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-250053 size-full\" src=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Lokale-Verwendung-der-Schriftarten-pru\u0308fen.png\" alt=\"Lokale Verwendung der Google Fonts Schriftarten pru\u0308fen\" width=\"790\" height=\"340\" srcset=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Lokale-Verwendung-der-Schriftarten-pru\u0308fen.png 790w, https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Lokale-Verwendung-der-Schriftarten-pru\u0308fen-768x331.png 768w, https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/06\/Lokale-Verwendung-der-Schriftarten-pru\u0308fen-480x207.png 480w\" sizes=\"(max-width: 790px) 100vw, 790px\" \/><\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h2>Google Fonts lokal hosten mit Plugins<\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p>Ich pers\u00f6nlich versuche aufgrund von unterschiedlichen Gr\u00fcnden (Performance, Sicherheit, &#8230;) alle Anforderungen erstmal ohne Plugin zu l\u00f6sen. Daher empfehle ich dir den manuellen Weg, den ich oben beschrieben habe.<\/p>\n<p>Falls du dich damit nicht sicher oder wohl f\u00fchlst, kannst du es aber nat\u00fcrlich gerne mit einem Plugin umsetzen. Vor allem f\u00fcr &#8222;nicht-Spezialisten&#8220;, die vielleicht nicht jeden Tag mit WordPress zu tun haben, ist es eine reizvolle M\u00f6glichkeit.<\/p>\n<p>Daher gebe ich dir hier 3 Plugin-Tipps zum Thema Google Fonts und der DSGVO.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; custom_margin=&#8220;||0px||false|false&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h3>Borlabs Fonts Blocker<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p>Um nicht lokal geladenen Google Fonts entg\u00fcltig den Hahn abzudrehen, kannst du den <strong>Font Blocker von Borlabs<\/strong> verwenden.<\/p>\n<p>Sobald du es installiert und aktiviert hast, kappt das Plugin alle Verbindungen zu Google bez\u00fcglich deren Fonts. <strong>L\u00f6sche<\/strong> <strong>nach aktivieren<\/strong> vorsichtshalber den <strong>Cache<\/strong> deiner Website.<\/p>\n<p>Das Plugin kannst du hier herunterladen: <a href=\"https:\/\/de.borlabs.io\/borlabs-font-blocker\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Borlabs Fonts Blocker<\/a>.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; custom_margin=&#8220;||0px||false|false&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h3>OMGF &#8211; GDPR\/DSVGO Compliant, Faster Google Fonts. Easy.<br \/>\n <\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p>Vermutlich eines der bekanntesten Plugins zum Thema Google Fonts lokal einbinden. OMGF scannt deine Seite auf Google Fonts und speichert diese auf deinem Server ab.\u00a0<\/p>\n<p>Das Plugin kannst du hier herunterladen: <a href=\"https:\/\/wordpress.org\/plugins\/host-webfonts-local\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">OMGF<\/a>.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; custom_margin=&#8220;||0px||false|false&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h3>GDPRress &#8211; Eliminate external requests to increase GDPR compliance<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p>Das Plugin GDPress ist noch relativ neu und unbekannt, aber von einem bekannten Entwickler in der WordPress-Welt. GDPress scannt deine Webseite auf Skripte und Stylesheet von Drittanbietern.\u00a0<\/p>\n<p>Danach kannst du diese lokal auf deinem Server speichern, damit keine Anfragen von und zu externen Anbietern stattfinden.<\/p>\n<p>Das Plugin kannst du hier herunterladen: <a href=\"https:\/\/wordpress.org\/plugins\/gdpr-press\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">GDPRS<\/a>.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.0&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h2>Was tun, wenn immer noch Google Fonts eingesetzt werden?<\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.1&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p>Wenn du nun immer noch Google Fonts auf deiner Wesbeite im Einsatz hast, kommen diese h\u00f6chstwahrscheinlich \u00fcber ein <strong>Plugin<\/strong> oder <strong>eingebundene Elemente<\/strong>.<\/p>\n<p>Bekannte <strong>Plugins<\/strong> sind hier vor allem Google ReCAPTCHA, Newsletter-Tools wie ActiveCampaign, MailPoet oder Typeform. Immer h\u00e4ufiger bieten diese Anbieter den <strong>Einsatz lokaler Schriftarten<\/strong>. Daf\u00fcr gibt es jeweils individuelle Vorgehen, die der Anbieter meist dokumentiert hat. Im schlimmsten Fall, wie bei Google reCAPTCHA, ist es nicht m\u00f6glich. Hier gibt es nur eine L\u00f6sung: <strong>Umstieg auf DSGVO-konforme Alternativen<\/strong>. Bei Google reCAPTCHA empfehle ich <a href=\"https:\/\/wordpress.org\/plugins\/honeypot\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">WP Amour<\/a> oder <a href=\"https:\/\/wordpress.org\/plugins\/contact-form-7-honeypot\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Honeypot<\/a>.<\/p>\n<p>Aber auch \u00fcber sogenannte <strong>iFrames<\/strong> k\u00f6nnen Google Fonts auf deiner Seite zum Einsatz kommen. Wenn du z. B. Youtube Videos oder Google Maps eingebunden hast. Hier gibt es nur die L\u00f6sung des <strong>Content Blockers<\/strong>. Das hei\u00dft das Laden des iFrames wird erst <strong>nach der Einwilligung<\/strong> des Besuchers freigegeben. Hier sehe ich leider sehr h\u00e4ufig Fehler in der Implementierung. &#8222;Mein&#8220; Cookie Consent Tool <a href=\"https:\/\/de.borlabs.io\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Borlabs Cookie<\/a> bringt einen solchen Blocker mit und funktioniert zuverl\u00e4ssig.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.1&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h2>Immer noch keine 100%-L\u00f6sung gefunden?<\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.21.2&#8243; _module_preset=&#8220;default&#8220; header_text_align=&#8220;left&#8220; header_2_text_align=&#8220;left&#8220; header_2_text_color=&#8220;#3E6787&#8243; header_3_text_align=&#8220;left&#8220; header_3_text_align_last_edited=&#8220;off|desktop&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<p>Nat\u00fcrlich hoffe ich, dass dir diese Anleitung dabei geholfen hat, deine Webseite bezogen auf Google Schriftarten DSGVO-konform zu gestalten.<\/p>\n<p>Sollte das nicht der Fall sein oder du daf\u00fcr auch einfach keine Zeit aufwenden kannst oder magst, sieh dir gerne meinen <a href=\"https:\/\/cs-webdesigns.com\/dsgvo-check\/\">DSGVO-Check<\/a> an oder <a href=\"\/#kontakt\">melde dich bei mir<\/a>.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8220;4.18.1&#8243; _module_preset=&#8220;c0ae98a9-b2c6-434f-a771-66df9e5780aa&#8220; locked=&#8220;off&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<h2>Fazit<\/h2>\n<p>[\/et_pb_text][dsm_icon_list icon_font_size=&#8220;18px&#8220; list_space_between=&#8220;5px&#8220; text_indent=&#8220;10px&#8220; icon_font_size_tablet=&#8220;18px&#8220; icon_font_size_phone=&#8220;18px&#8220; icon_font_size_last_edited=&#8220;on|desktop&#8220; _builder_version=&#8220;4.19.5&#8243; _module_preset=&#8220;default&#8220; custom_css_main_element=&#8220;padding-left: 0!important;&#8220; global_colors_info=&#8220;{}&#8220;][dsm_icon_list_child text=&#8220;Die Verwendung von nicht lokal gespeicherten Google Fonts verst\u00f6\u00dft gegen die DSGVO &#038; das TTDSG.&#8220; font_icon=&#8220;&#xf560;||fa||900&#8243; _builder_version=&#8220;4.19.5&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;][\/dsm_icon_list_child][dsm_icon_list_child text=&#8220;Einfache Probleml\u00f6sung: Verwendung lokaler Google Fonts\/Schriftarten.&#8220; font_icon=&#8220;&#xf560;||fa||900&#8243; _builder_version=&#8220;4.19.5&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;][\/dsm_icon_list_child][dsm_icon_list_child text=&#8220;Das bekannte %22Dateityp nicht zul\u00e4ssig%22-Problem l\u00e4sst sich durch einen einzeiligen Code umgehen. Wichtig: Danach wieder rausnehmen!&#8220; font_icon=&#8220;&#xf560;||fa||900&#8243; _builder_version=&#8220;4.19.5&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;][\/dsm_icon_list_child][dsm_icon_list_child text=&#8220;Kontrolliere danach unbedingt, ob du auch wirklich nur noch lokale Schiftarten verwendest (auch Plugins!).&#8220; font_icon=&#8220;&#xf560;||fa||900&#8243; _builder_version=&#8220;4.19.5&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;][\/dsm_icon_list_child][dsm_icon_list_child text=&#8220;F\u00fcr die DSGVO-konforme Verwendung von Google Fonts gibt es mittlerweile sehr gute Plugins.&#8220; font_icon=&#8220;&#xf560;||fa||900&#8243; _builder_version=&#8220;4.19.5&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;][\/dsm_icon_list_child][dsm_icon_list_child text=&#8220;Achtung bei bestimmten Plugins und iFrames.&#8220; font_icon=&#8220;&#xf560;||fa||900&#8243; _builder_version=&#8220;4.19.5&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;][\/dsm_icon_list_child][\/dsm_icon_list][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this guide, I'll show you step by step how to use Google Fonts in Divi in compliance with the GDPR. I'll also give you plugins on the topic.<\/p>","protected":false},"author":1,"featured_media":254700,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Google Fonts in Divi lokal einbinden (DSGVO-konform) | Guide ","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_analysis_target_kw":"Google Fonts in Divi,Google Fonts,divi google fonts lokal einbinden,lokal einbinden,DSGVO,DSGVO-konform,Divi,Anleitung,divi google fonts local,divi google fonts deaktivieren,divi google fonts dsgvo,divi google fonts einbinden,divi google fonts,Guide","_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","iawp_total_views":581,"footnotes":""},"categories":[40,57],"tags":[],"class_list":["post-250041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi","category-dsgvo"],"_links":{"self":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/posts\/250041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/comments?post=250041"}],"version-history":[{"count":0,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/posts\/250041\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/media\/254700"}],"wp:attachment":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/media?parent=250041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/categories?post=250041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/tags?post=250041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}