Headings extrabold und Fließtext als Serifenschrift für eine angenehmere Lesbarkeit. Als serifenlose Grund-Schrift verzichte ich (nicht zuletzt aus Performancegründen, da keine Schriftart nachgeladen werden muss) die Auslieferung einer entsprechenden Schriftart und belasse es bei "Systemschriftarten". Dank Tailwind CSS genügt hier also die Vergabe der CSS-Klasse .font-sans für entsprechende Schriftarten.

Bei der Serif-Schrift habe ich es mir deutlich schwerer getan. Die serife Systemschriften

font-family: Georgia, Cambria, "Times New Roman", Times, serif;

konnten mich im Fließtext nicht überzeugen. Stattdessen habe ich mich zur Zeit für die Schrift Lora entschieden.

Aus Gründen des Datenschutzes (Stichwort DSGVO) und Ladegeschwindigkeit möchte ich die Schrift jedoch nicht über einen Google CDN durch den Nutzer herunterladen lassen - stattdessen möchte ich die Schriftart direkt mitliefern.

Dies geht übrigens wirklich einfach: mit einem npm install --save typeface-lora wim Root-Verzeichnis des Gatsby Projekts lässt sich die Schriftart über den node package manager installieren, mit require('typeface-lora'); in gatsby-browser.js eingebunden. Jetzt fehlt lediglich noch innerhalb des CSS eine Verweis auf die Serif-Schrift Lora - mit Fallback auf serife Systemschriften:

font-family: "Lora",Georgia, Cambria, "Times New Roman", Times, serif;