Klausgesprochen

Über Typographie und Schrift im Internet gibt es unzählige Bücher 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äftigt.

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ät 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 „inherit“ und „system stack“)

Aber ach. Den meisten Benutzern ist das gar nicht bewußt. Ich hatte das selbst vergessen. Google Fonts ist eine interessante Lösung; leider kommt man damit in Datenschutzschwierigkeiten. Aber über Umwege geht es doch.

Dank der Anleitung „Adding local fonts“ für das bei mir genutzte Theme „GeneratePress“ habe ich jetzt einen altmodischen Schreibmaschinenfont eingebaut, der direkt von meinem Webspace ausgeliefert wird.

2 Haken: man muss die Schriftdateien per sFTP in WordPress hochladen, weil ein Import über den Medienbereich aus Sicherheitsgründen gesperrt ist. Und ich war zu doof, den Font Manager in GeneratePress zu finden. Weil ich damit auch nicht den Schalter für „lokal, nicht von Google“ für die Schriftdateien fand, habe ich die Schrift im CSS kurzerhand umbenannt in „Schreibmaschine“.

Ich wollte den Schriftsatz sowieso nur auf größeren Bildschirmen anzeigen lassen, so dass ich mit den folgenden CSS-Ergänzungen (GeneratePress / Customizer / zusätzliches CSS) auskomme:

blockquote {background-color: #e9f1f5;
font-style: italic}
body {
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
/* special-elite-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Schreibmaschine';
  font-style: normal;
  font-weight: 400;
  src: url('https://klausgesprochen.de/wp-content/uploads/special-elite-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('https://klausgesprochen.de/wp-content/uploads/special-elite-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://klausgesprochen.de/wp-content/uploads/special-elite-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://klausgesprochen.de/wp-content/uploads/special-elite-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://klausgesprochen.de/wp-content/uploads/special-elite-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://klausgesprochen.de/wp-content/uploads/special-elite-v18-latin-regular.svg#SpecialElite') format('svg'); /* Legacy iOS */
}
/* @media only screen and (min-width: 1024px) {
  h1, h2 {
    font-family: "Schreibmaschine";
  }
} */

h1, h2 {font-family: "Schreibmaschine"}

.main-title {font-family: "Schreibmaschine"}

Und wo ich schon dabei bin, for the record noch diese CSS-Ergänzung, die Blockquotes formatiert und für Silbentrennung sorgt:

blockquote {background-color: #e9f1f5;
font-style: italic}
body {
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

Zumindest auf meinen Geräten sieht es passabel aus. Mal sehen, wie lange ich mir das ansehen kann, ohne dass es langweilig wird.