{"id":69,"date":"2018-03-18T15:38:05","date_gmt":"2018-03-18T14:38:05","guid":{"rendered":"http:\/\/test.ekiwi.de\/?p=69"},"modified":"2020-11-07T20:37:22","modified_gmt":"2020-11-07T19:37:22","slug":"formular-mit-google-fonts-verschoenern","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/69\/formular-mit-google-fonts-verschoenern\/","title":{"rendered":"Formular mit Google Fonts versch\u00f6nern"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 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\/69\/formular-mit-google-fonts-verschoenern\/#Videoanleitung\" >Videoanleitung<\/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\/69\/formular-mit-google-fonts-verschoenern\/#Anleitung\" >Anleitung<\/a><\/li><\/ul><\/nav><\/div>\n<p>Legt man im CSS oder im HTML-Code eine Schriftart fest, muss diese auf dem Rechner des Anwenders installiert sein. Deswegen werden meist Standardschriftarten verwendet, bzw. mehrere Schriftarten:<\/p>\n<blockquote><p>Segoe UI,Arial,sans-serif<\/p><\/blockquote>\n<p>Hier wird zuerst versucht Segoe UI zu verwenden. Ist diese Schrift im System nicht vorhanden, wird Arial verwendet, falls diese nicht vorhanden ist, wird es generischer, dann wird einfach eine serifenlose Schriftart verwendet.<\/p>\n<p>Nicht immer will man sich drauf verlassen, was der Anwender installiert hat. Eine M\u00f6glichkeit ist die Nutzung von <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a>. Dort stehen viele hundert verschiedene Schriftarten zur Verf\u00fcgung, welche man in seine Webseite einbinden kann. Die Schriftart wird dabei vom Google Server geladen, der Anwender ben\u00f6tigt diese nicht in seinem System.<\/p>\n<p>In diesem Beispiel zeigen wir, wie man ein Formular versch\u00f6nern kann. Dieses realisieren wir mit der Software <a title=\"Online Formular erstellen\" href=\"https:\/\/da-software.net\/daform\/daform_start.htm\" target=\"_blank\" rel=\"noopener noreferrer\">DA-FormMaker<\/a>, aber die Schritte funktionieren auch bei normalen Formularen oder HTML-Seiten.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Videoanleitung\"><\/span>Videoanleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/2iw4MCfTrrA\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anleitung\"><\/span>Anleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wir starten mit der Auswahl der Schriftarten, unter <a href=\"https:\/\/fonts.google.com\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/fonts.google.com<\/a> kann man nach verschiedenen Schriftarten und Typen filtern.<\/p>\n<p>Hat man eine Schriftart gefunden, f\u00fcgt man diese \u00fcber den entsprechenden Link zur Auswahl hinzu:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70\" src=\"\/wp-content\/uploads\/2018\/03\/google_fonts1.png\" alt=\"\" width=\"514\" height=\"326\" srcset=\"\/wp-content\/uploads\/2018\/03\/google_fonts1.png 514w, \/wp-content\/uploads\/2018\/03\/google_fonts1-300x190.png 300w\" sizes=\"auto, (max-width: 514px) 100vw, 514px\" \/><\/p>\n<p>Es lassen sich mehrere Schriftarten ausw\u00e4hlen. Anschlie\u00dfend k\u00f6nnen wir uns den Code zum Einbinden anzeigen lassen:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71\" src=\"\/wp-content\/uploads\/2018\/03\/google_fonts2.png\" alt=\"\" width=\"610\" height=\"561\" srcset=\"\/wp-content\/uploads\/2018\/03\/google_fonts2.png 610w, \/wp-content\/uploads\/2018\/03\/google_fonts2-300x276.png 300w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/p>\n<p>Den ersten Code nehmen wir nun und f\u00fcgen ihn im Head-Bereich der Webseite ein. Im <a title=\"create online form\" href=\"https:\/\/da-software.net\/en\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener noreferrer\">DA-FormMaker<\/a> geht dies in den erweiterten Einstellungen:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-72\" src=\"\/wp-content\/uploads\/2018\/03\/google_fonts3.png\" alt=\"\" width=\"796\" height=\"339\" srcset=\"\/wp-content\/uploads\/2018\/03\/google_fonts3.png 796w, \/wp-content\/uploads\/2018\/03\/google_fonts3-300x128.png 300w, \/wp-content\/uploads\/2018\/03\/google_fonts3-768x327.png 768w\" sizes=\"auto, (max-width: 796px) 100vw, 796px\" \/><\/p>\n<p>Im Beispiel verwenden wir das W3CSS-Formular und bearbeiten entsprechend dieses Template. Bei einer fertigen HTML-Seite, editieren wir diese in einem Texteditor und f\u00fcgen den Code ebenfalls im HEAD-Bereich ein. Dieser Code bewirkt, dass Laden der Schriftart vom Google-Server. Datenschutztechnisch gibt man also durchaus Informationen seiner Besucher an Google weiter. Auch die Ladezeit erh\u00f6ht sich etwas, da die Schriftart zus\u00e4tzlich herunter geladen werden muss. Das sollte man vor der Nutzung bedenken.<\/p>\n<p>Anschlie\u00dfend legen wir die Schriftarten f\u00fcr das Formular fest. Dies geht im Reiter Design. Wichtig: der <code>;<\/code> am Ende darf nicht \u00fcbernommen werden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73\" src=\"\/wp-content\/uploads\/2018\/03\/google_fonts4.png\" alt=\"\" width=\"765\" height=\"216\" srcset=\"\/wp-content\/uploads\/2018\/03\/google_fonts4.png 765w, \/wp-content\/uploads\/2018\/03\/google_fonts4-300x85.png 300w\" sizes=\"auto, (max-width: 765px) 100vw, 765px\" \/><\/p>\n<p>Im reinen CSS-Code sieht das dann z.B. so aus:<\/p>\n<pre>h1 { color:#2196f3; font-family:'Gloria Hallelujah', cursive; font-size:30pt; }\r\np { color:#000000; font-family:'Indie Flower', cursive; font-size:12pt; }\r\n<\/pre>\n<p>Kann die Schriftart mal nicht vom Google Server geladen werden, wird eine Standardschrift verwendet. Es besteht also keine Gefahr, dass der Anwender vor einer leeren Seite steht.<\/p>\n<p>Wird jetzt die HTML-Datei im Browser aufgerufen, sollte die Schriftart entsprechend angezeigt werden:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-74\" src=\"\/wp-content\/uploads\/2018\/03\/google_fonts_fertig.jpg\" alt=\"\" width=\"600\" height=\"708\" srcset=\"\/wp-content\/uploads\/2018\/03\/google_fonts_fertig.jpg 600w, \/wp-content\/uploads\/2018\/03\/google_fonts_fertig-254x300.jpg 254w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Wie man sieht, recht einfach.<\/p>","protected":false},"excerpt":{"rendered":"<p>Legt man im CSS oder im HTML-Code eine Schriftart fest, muss diese auf dem Rechner des Anwenders installiert sein. Deswegen<\/p>\n","protected":false},"author":1,"featured_media":61,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[17,4],"class_list":["post-69","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-google","tag-html"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/69","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=69"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/61"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}