{"id":441,"date":"2023-03-31T10:17:44","date_gmt":"2023-03-31T08:17:44","guid":{"rendered":"https:\/\/klausgesprochen.de\/blog\/?p=441"},"modified":"2024-07-09T14:23:45","modified_gmt":"2024-07-09T12:23:45","slug":"bastelstunde-schriften","status":"publish","type":"post","link":"https:\/\/klausgesprochen.de\/blog\/bastelstunde-schriften\/","title":{"rendered":"Bastelstunde Schriften"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"526\" height=\"418\" src=\"https:\/\/klausgesprochen.de\/blog\/wp-content\/uploads\/klaus_schreibmaschine.png\" alt=\"Screen Shot Webseite Klausgesprochen.de\" class=\"wp-image-448\" srcset=\"https:\/\/klausgesprochen.de\/blog\/wp-content\/uploads\/klaus_schreibmaschine.png 526w, https:\/\/klausgesprochen.de\/blog\/wp-content\/uploads\/klaus_schreibmaschine-300x238.png 300w\" sizes=\"auto, (max-width: 526px) 100vw, 526px\" \/><\/figure>\n\n\n\n<p>\u00dcber Typographie und Schrift im Internet gibt es unz\u00e4hlige B\u00fccher und genauso viele Klagen. Nachdem mich die Schriftart im Podcast schon immer ein bisschen genervt hat, habe ich mich (wieder einmal) mit dem Thema besch\u00e4ftigt.<\/p>\n\n\n\n<p>Dabei waren die Einstellungen gar nicht schlecht: es war gar keine feste Schriftart vorgegeben, d. h. es wurde die Schrift genommen, die beim Seitenbesucher in seinem Ger\u00e4t als Default eingestellt war. Eigentlich eine gute Idee: man spart sich den Aufwand der Definition und der Besucher sieht es so, wie er will. (Note to self: es gibt einen Unterschied zwischen &#8222;inherit&#8220; und &#8222;system stack&#8220;)<\/p>\n\n\n\n<p>Aber ach. Den meisten Benutzern ist das gar nicht bewu\u00dft. Ich hatte das selbst vergessen. Google Fonts ist eine interessante L\u00f6sung; leider kommt man damit in Datenschutzschwierigkeiten. Aber \u00fcber Umwege geht es doch.<\/p>\n\n\n\n<p>Dank der Anleitung <a href=\"https:\/\/docs.generatepress.com\/article\/adding-local-fonts\/\">&#8222;Adding local fonts&#8220;<\/a> f\u00fcr das bei mir genutzte Theme <a href=\"https:\/\/generatepress.com\/\">&#8222;GeneratePress&#8220;<\/a> habe ich jetzt einen altmodischen Schreibmaschinenfont eingebaut, der direkt von meinem Webspace ausgeliefert wird.<\/p>\n\n\n\n<p>2 Haken: man muss die Schriftdateien per sFTP in WordPress hochladen, weil ein Import \u00fcber den Medienbereich aus Sicherheitsgr\u00fcnden gesperrt ist. Und ich war zu doof, den Font Manager in GeneratePress zu finden. Weil ich damit auch nicht den Schalter f\u00fcr &#8222;lokal, nicht von Google&#8220; f\u00fcr die Schriftdateien fand, habe ich die Schrift im CSS kurzerhand umbenannt in &#8222;Schreibmaschine&#8220;.<\/p>\n\n\n\n<p>Ich wollte den Schriftsatz sowieso nur auf gr\u00f6\u00dferen Bildschirmen anzeigen lassen, so dass ich mit den folgenden CSS-Erg\u00e4nzungen (GeneratePress \/ Customizer \/ zus\u00e4tzliches CSS) auskomme:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>blockquote {background-color: #e9f1f5;\nfont-style: italic}\nbody {\n    -ms-hyphens: auto;\n    -webkit-hyphens: auto;\n    hyphens: auto;\n}\n\/* special-elite-regular - latin *\/\n@font-face {\n  font-display: swap; \/* Check https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/font-display for other options. *\/\n  font-family: 'Schreibmaschine';\n  font-style: normal;\n  font-weight: 400;\n  src: url('https:\/\/klausgesprochen.de\/wp-content\/uploads\/special-elite-v18-latin-regular.eot'); \/* IE9 Compat Modes *\/\n  src: url('https:\/\/klausgesprochen.de\/wp-content\/uploads\/special-elite-v18-latin-regular.eot?#iefix') format('embedded-opentype'), \/* IE6-IE8 *\/\n       url('https:\/\/klausgesprochen.de\/wp-content\/uploads\/special-elite-v18-latin-regular.woff2') format('woff2'), \/* Super Modern Browsers *\/\n       url('https:\/\/klausgesprochen.de\/wp-content\/uploads\/special-elite-v18-latin-regular.woff') format('woff'), \/* Modern Browsers *\/\n       url('https:\/\/klausgesprochen.de\/wp-content\/uploads\/special-elite-v18-latin-regular.ttf') format('truetype'), \/* Safari, Android, iOS *\/\n       url('https:\/\/klausgesprochen.de\/wp-content\/uploads\/special-elite-v18-latin-regular.svg#SpecialElite') format('svg'); \/* Legacy iOS *\/\n}\n\/* @media only screen and (min-width: 1024px) {\n  h1, h2 {\n    font-family: \"Schreibmaschine\";\n  }\n} *\/\n\nh1, h2 {font-family: \"Schreibmaschine\"}\n\n.main-title {font-family: \"Schreibmaschine\"}<\/code><\/pre>\n\n\n\n<p>Und wo ich schon dabei bin, for the record noch diese CSS-Erg\u00e4nzung, die Blockquotes formatiert und f\u00fcr Silbentrennung sorgt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>blockquote {background-color: #e9f1f5;\nfont-style: italic}\nbody {\n    -ms-hyphens: auto;\n    -webkit-hyphens: auto;\n    hyphens: auto;\n}<\/code><\/pre>\n\n\n\n<p>Zumindest auf meinen Ger\u00e4ten sieht es passabel aus. Mal sehen, wie lange ich mir das ansehen kann, ohne dass es langweilig wird.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00dcber Typographie und Schrift im Internet gibt es unz\u00e4hlige B\u00fccher und genauso viele Klagen. Nachdem mich die Schriftart im Podcast schon immer ein bisschen genervt hat, habe ich mich (wieder einmal) mit dem Thema besch\u00e4ftigt. Dabei waren die Einstellungen gar nicht schlecht: es war gar keine feste Schriftart vorgegeben, d. h. es wurde die Schrift &hellip; <a href=\"https:\/\/klausgesprochen.de\/blog\/bastelstunde-schriften\/\" class=\"more-link\"><span class=\"screen-reader-text\">Bastelstunde Schriften<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_share_on_mastodon":"0"},"categories":[16,8,6],"tags":[],"class_list":["post-441","post","type-post","status-publish","format-standard","hentry","category-internet","category-software","category-wordpress"],"share_on_mastodon":{"url":"","error":""},"_links":{"self":[{"href":"https:\/\/klausgesprochen.de\/blog\/wp-json\/wp\/v2\/posts\/441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/klausgesprochen.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/klausgesprochen.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/klausgesprochen.de\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/klausgesprochen.de\/blog\/wp-json\/wp\/v2\/comments?post=441"}],"version-history":[{"count":0,"href":"https:\/\/klausgesprochen.de\/blog\/wp-json\/wp\/v2\/posts\/441\/revisions"}],"wp:attachment":[{"href":"https:\/\/klausgesprochen.de\/blog\/wp-json\/wp\/v2\/media?parent=441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/klausgesprochen.de\/blog\/wp-json\/wp\/v2\/categories?post=441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/klausgesprochen.de\/blog\/wp-json\/wp\/v2\/tags?post=441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}