{"id":2631,"date":"2022-05-16T21:37:12","date_gmt":"2022-05-16T19:37:12","guid":{"rendered":"https:\/\/ekiwi.de\/?p=2631"},"modified":"2022-05-16T21:37:12","modified_gmt":"2022-05-16T19:37:12","slug":"google-fonts-datenschutzsicher-einbinden","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/2631\/google-fonts-datenschutzsicher-einbinden\/","title":{"rendered":"Google Fonts datenschutzsicher einbinden"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/2631\/google-fonts-datenschutzsicher-einbinden\/#Schrift_herunterladen\" >Schrift herunterladen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/2631\/google-fonts-datenschutzsicher-einbinden\/#TTF_oder_Woff_Format\" >TTF oder Woff Format<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/2631\/google-fonts-datenschutzsicher-einbinden\/#Einbinden\" >Einbinden<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/2631\/google-fonts-datenschutzsicher-einbinden\/#Nutzung_in_DA-FormMaker\" >Nutzung in DA-FormMaker<\/a><\/li><\/ul><\/nav><\/div>\n<p>Google Fonts auf dem eigenen Server hosten, so geht es.<\/p>\n<p><!--more--><\/p>\n<p>Vor einiger Zeit gab es mal wieder ein Urteil, welches bei einigen Webmastern Unbehagen ausgel\u00f6st haben d\u00fcrfte. So urteilte das Landgericht M\u00fcnchen, dass die Verwendung der Google Fonts nicht datenschutzkonform sei, sofern der Benutzer vorher nicht explizit zustimmt.<\/p>\n<p>Deswegen schauen wir uns an, wie wir die Schriftarten lokal auf unserem Server hosten k\u00f6nnen. Fangen wir an!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Schrift_herunterladen\"><\/span>Schrift herunterladen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Zuerst laden wir die Schriftart von <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\">Google Fonts<\/a> herunter. Praktischerweise bietet Google direkt einen Download an, welcher die Schriftart(en) als ZIP-Archiv herunterl\u00e4dt.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/05\/font_1.png\" alt=\"\" width=\"900\" height=\"437\" class=\"alignnone size-full wp-image-2632\" srcset=\"\/wp-content\/uploads\/2022\/05\/font_1.png 900w, \/wp-content\/uploads\/2022\/05\/font_1-300x146.png 300w, \/wp-content\/uploads\/2022\/05\/font_1-768x373.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"TTF_oder_Woff_Format\"><\/span>TTF oder Woff Format<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Standardm\u00e4\u00dfig werden die Schriftarten im TTF (True Type Font) Format bereitgestellt. Dieses kommt z.B. auch in Windows zum Einsatz. Unsere Empfehlung ist, dieses Format zu verwenden, da dieses bereits von allen <a href=\"https:\/\/caniuse.com\/ttf\" target=\"_blank\" rel=\"noopener\">verbreiteten Browsern unterst\u00fctzt<\/a> wird.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/05\/font_2.jpg\" alt=\"\" width=\"1342\" height=\"429\" class=\"alignnone size-full wp-image-2633\" srcset=\"\/wp-content\/uploads\/2022\/05\/font_2.jpg 1342w, \/wp-content\/uploads\/2022\/05\/font_2-300x96.jpg 300w, \/wp-content\/uploads\/2022\/05\/font_2-1024x327.jpg 1024w, \/wp-content\/uploads\/2022\/05\/font_2-768x246.jpg 768w\" sizes=\"auto, (max-width: 1342px) 100vw, 1342px\" \/><\/p>\n<p>Wer \u00e4ltere Browser unterst\u00fctzen will, kann die Schriftart auch in das <a href=\"https:\/\/cloudconvert.com\/ttf-to-woff\" target=\"_blank\" rel=\"noopener\">WOFF-Format konvertieren<\/a>. WOFF steht in diesem Fall f\u00fcr das Web Open Font Format. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Einbinden\"><\/span>Einbinden<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Schriftart laden wir nun auf unserem Server, anschlie\u00dfend k\u00f6nnen wir diese verwenden:<\/p>\n<pre>&lt;style&gt;\r\n    @font-face {\r\n        font-family: &quot;Macando Regular&quot;;\r\n        font-display: swap;\r\n        src: url(&quot;\/temp\/Macondo-Regular.ttf&quot;);\r\n    }\r\n\r\n    body { background-color:#ffffff;}\r\n    h1 { color:#2196f3; font-family:&quot;Macando Regular&quot;; font-size:30pt; }\r\n    p { color:#000000; font-family:&quot;Macando Regular&quot;; font-size:12pt; }\r\n&lt;\/style&gt;<\/pre>\n<p>In diesem Beispiel haben wir die Schriftart in den Ordner &#8222;temp&#8220; unserer Domain verfrachtet. Mit dem &#8222;font-face&#8220;-Befehl legen wir den Namen fest, welchen wir anschlie\u00dfend im weiteren CSS verwenden k\u00f6nnen. Als Ergebnis wird nun die neue Schriftart verwendet.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/05\/font_3.png\" alt=\"\" width=\"578\" height=\"400\" class=\"alignnone size-full wp-image-2634\" srcset=\"\/wp-content\/uploads\/2022\/05\/font_3.png 578w, \/wp-content\/uploads\/2022\/05\/font_3-300x208.png 300w\" sizes=\"auto, (max-width: 578px) 100vw, 578px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Nutzung_in_DA-FormMaker\"><\/span>Nutzung in DA-FormMaker<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Auch in Anwendungssoftware, z.B. f\u00fcr <a href=\"https:\/\/da-software.net\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener\">Software zur HTML-Formularerstellung<\/a>, wie unserem DA-FormMaker l\u00e4sst sich diese Variante umsetzen.<\/p>\n<p>Zuerst binden wir die Schriftart ein:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/05\/font_4.png\" alt=\"\" width=\"731\" height=\"267\" class=\"alignnone size-full wp-image-2635\" srcset=\"\/wp-content\/uploads\/2022\/05\/font_4.png 731w, \/wp-content\/uploads\/2022\/05\/font_4-300x110.png 300w\" sizes=\"auto, (max-width: 731px) 100vw, 731px\" \/><\/p>\n<p>Anschlie\u00dfend k\u00f6nnen wir die Schriftart in den Einstellungen verwenden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/05\/font_5.png\" alt=\"\" width=\"514\" height=\"192\" class=\"alignnone size-full wp-image-2636\" srcset=\"\/wp-content\/uploads\/2022\/05\/font_5.png 514w, \/wp-content\/uploads\/2022\/05\/font_5-300x112.png 300w\" sizes=\"auto, (max-width: 514px) 100vw, 514px\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>Google Fonts auf dem eigenen Server hosten, so geht es.<\/p>\n","protected":false},"author":1,"featured_media":92,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[22,4],"class_list":["post-2631","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=2631"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2631\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/92"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=2631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=2631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=2631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}