{"id":2111,"date":"2021-11-24T20:01:56","date_gmt":"2021-11-24T19:01:56","guid":{"rendered":"https:\/\/ekiwi.de\/?p=2111"},"modified":"2022-06-17T14:53:41","modified_gmt":"2022-06-17T12:53:41","slug":"google-fonts-mit-css-einbinden-und-verwenden","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/2111\/google-fonts-mit-css-einbinden-und-verwenden\/","title":{"rendered":"Google Fonts mit CSS einbinden und verwenden"},"content":{"rendered":"<p>Viele Schriftarten, statt Standardschrift im Browser. Google Fonts einfach einbinden.<\/p>\n<p><!--more--><\/p>\n<p>Google Fonts lassen sich kostenlos nutzen und bieten \u00fcber 1000 verschiedene Schriftarten zur freien Nutzung. Eingebunden werden diese als externes Stylesheet im Kopf. Anschlie\u00dfend k\u00f6nnen wir die Schrift in CSS-Code verwenden.<\/p>\n<p><strong>Hinweis:<\/strong> Das Einbinden auf diese Art kann datenschutzrechtlich bedenklich sein, bitte beachten Sie den folgenden Blogartikel zum <a href=\"https:\/\/ekiwi.de\/index.php\/2631\/google-fonts-datenschutzsicher-einbinden\/\">datenschutzsicheren Einbinden von Google Fonts<\/a>.<\/p>\n<pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/fonts.googleapis.com\/css?family=Estonia&quot;&gt;\r\n&lt;style&gt;\r\n\tbody {\r\n\t\tfont-family: &quot;Estonia&quot;, sans-serif;\r\n\t}\r\n&lt;\/style&gt;<\/pre>\n<p>Das Ergebnis:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/11\/fonts_1.png\" alt=\"\" width=\"368\" height=\"206\" class=\"alignnone size-full wp-image-2112\" srcset=\"\/wp-content\/uploads\/2021\/11\/fonts_1.png 368w, \/wp-content\/uploads\/2021\/11\/fonts_1-300x168.png 300w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/p>\n<p>Zur Auswahl der Schriftart bietet <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\">Google eine eigene Seite<\/a> an.<\/p>\n<p>Den Namen der Schriftart verwenden wir dann als &#8222;family&#8220;-Parameter f\u00fcr unser Stylesheet. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/11\/fonts_2.png\" alt=\"\" width=\"725\" height=\"394\" class=\"alignnone size-full wp-image-2113\" srcset=\"\/wp-content\/uploads\/2021\/11\/fonts_2.png 725w, \/wp-content\/uploads\/2021\/11\/fonts_2-300x163.png 300w\" sizes=\"auto, (max-width: 725px) 100vw, 725px\" \/><\/p>\n<p>Mehrere Schriftarten lassen sich ebenfalls einbinden, zur Trennung wird das | Zeichen verwendet. Ein Beispiel:<\/p>\n<pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/fonts.googleapis.com\/css?family=Nunito|Ubuntu|Estonia&quot;&gt;<\/pre>\n<h2>Beispiel<\/h2>\n<p><a href=\"https:\/\/ekiwi.de\/tryit\/?id=187\" targe=\"_blank\">Beispiel im Browser ausprobieren<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Viele Schriftarten, statt Standardschrift im Browser. Google Fonts einfach einbinden.<\/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":[],"class_list":["post-2111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2111","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=2111"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2111\/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=2111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=2111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=2111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}