Transkript
Moin und herzlich Willkommen zum zweiten Teil des Kurses „Bessere Websites mit OPTIMIST“. In diesem Video zeige ich dir, wie du die Schriften des Themes anpassen kannst. Aber bevor wir die Schriften ändern, sollten wir uns einmal ansehen, welche Schriften standardmäßig in OPTIMIST zum Einsatz kommen.
Dafür gehen wir wieder in die _variables.scss und ein Stück weiter unten finden wir folgende Anweisung: --base-font-family-1: apple-system, BlinkMacSystemFont, und so weiter zugewiesen. Diese Anweisung ist ein sogenannter Font Stack und gibt an welche Schriften in absteigender Reihefolge gesucht und verwendet werden sollen.
Es soll also zuerst versucht werden, die Apple Systemschrift zu verwenden, wenn diese installiert ist. Wenn nicht, soll die nächste Schrift geprüft und wenn vorhanden verwendet werden und so weiter. Dieser Font Stack setzt also auf Systemschriften und dadurch ist es ganz normal, dass OPTIMIST auf einem Mac anders aussieht, also auf einem PC und nochmal anders auf einem Android Smartphone oder Tablet. Dafür ist OPTIMIST aber extrem schnell, weil keine zusätzlichen Webfonts heruntergeladen werden müssen.
Für unser Projekt wollen wir nun die Schriftart Inter nutzen. Diese gibt es als Google Webfont und sie ähnelt ein wenig der Helvetica. Aber wie du vermutlich weißt, ist die direkte Google Fonts Integration in Deutschland rechtlich „etwas schwierig“. Deswegen verwenden wir den Google Webfont Helper, um die Schriftart herunterzuladen und lokal einzubinden, das heißt, sie wird dann vom eigenen Server geladen.
Dafür gebe ich in die Suche Inter ein und kann dann im nächsten Schritt wählen, welche Schriftschnitte ich verwenden möchte. Ich nehme für unser Beispiel den Regular-Schnitt, die Regular-Italic und als fetten Schnitt nehme ich die 700. Ich empfehle, dir möglichst wenige Schnitte zu verwenden, da jeder Schnitt die Ladezeit der Website erhöht und die Performance verschlechtert.
Mit jedem Schriftschnitt, den ich auswähle, ändert sich hier unten die CSS-Anweisung. Da ich in unserem Projekt nur moderne Browser unterstützen möchte, reichen diese wenigen Anweisungen aus. Würde ich auch ältere Browser unterstützen wollen, könnte ich hier meine Auswahl anpassen und es werden dann mehr Dateien zur Verfügung gestellt und eingebunden.
Ich kopiere also die CSS-Anweisungen und lade außerdem die Schriften herunter. Ich habe die Datei schon entpackt und lade die WOFF 2 Dateien nun auf meinen Server in das Verzeichnis files/theme/fonts.
Jetzt öffne ich die _fonts.scss im Ordner scss/base und füge dort die CSS-Anweisungen ein, die ich mir aus dem Google Webfont-Helper kopiert habe.
Im letzten Schritt gehe ich nun wieder in meine _variables.scss und ergänze die Variable --base-font-family-1, indem ich dort die Inter an erste Stelle setze. Wenn ich jetzt auf speichern klicke und das Frontend neu lade, dann sollte, wenn alles gut geht, die Inter als Schriftart zu sehen sein.
Wir sehen auf jeden Fall einen Unterschied, aber um sicher zu sein, untersuche ich jetzt nochmal die Überschrift mit dem Web-Inspector und sehe, hier unten, dass tatsächlich die Inter verwendet wird.
Jetzt gibt es noch eine klitzekleine Sache, die ich ändern muss. Ich habe ja gerade bei de Auswahl der Schriftschnitte festgelegt, dass ich die Inter in den Schriftschnitten 400, 400 italic und 700 nutzen möchte. OPTIMIST verwendet aber standardmäßig für Überschriften den Schriftschnitt 600.
Das heißt ich gehe wieder in meine _variables.scss und finde weiter unten eine Variable für die Schriftstärke von Überschriften. Diese stelle ich nun noch auf 700 um, denn wenn ich das nicht mache, dann überlasse ich es dem Browser, wie er mit der falschen Zuordnung umgehen soll und das kann durchaus merkwürdige Effekte haben.
Wenn du noch eine zweite Schriftart zum Beispiel nur für Überschriften verwenden möchtest, dann wiederholst du einfach die Schritte aus Schriftart auswählen, CSS Kopieren und Schriften herunterladen, entpacken und auf den Server hochladen. Dann legst du in der _variables.scss eine Variable --base-font-family-2 an und kannst diese dann der Variable --headings-font-family zuweisen.
Im nächsten Video zeige ich dir, wie unsere Grid-Erweiterung funktioniert, um Inhalte mehrspaltig darzustellen. Davor sende ich dir aber noch einen Artikel mit 5 Fakten über OPTIMIST, die dir ein paar wichtige Hintergrundinfos geben.
Also bis bald, mach's gut und Erstma!