Fiedenstaube mit rotem Herz nacht rechts fliegend

Give Peace a Chance

Fiedenstaube mit rotem Herz nach links fliegend

Die Schriftarten im TT2 und WP-FSE-Themes wechseln

Die Schriftarten im TT2 und WP-FSE-Themes wechseln

Achtung:
Dieser Artikel entfaltet seine Wirksamkeit erst mit dem Release WordPress 6.0.

Alternativ funktioniert es mit WordPress 5.9.2 und dem Gutenberg-Plugin mit der Version 12.8.1 oder höher.

Ich zeige euch, wie neue Schriftarten lokal – also DSGVO gerecht – eingebunden werden.

Dieser Artikel wird in Kürze vervollständigt.

Voraussetzungen

Um ohne Plugin eine weitere bzw. andere Schrift-Type in ein Full-Site-Editing-Theme wie Twenty-Twenty-Two anzuzeigen, sind einige Mindest-Voraussetzungen zu erfüllen.

  1. Mindestens WordPress 6.0 (oder WordPress 5.9.2 gemeinsam mit dem Gutenberg-Plugin 12.8.1 oder höher).
  2. Theme Twenty Twenty-Two (oder ein anderes Full-Site-Editing Theme).
  3. Zugang zu den Server-Dateien mit FileZilla o.ä.
  4. Du benötigst ein Child-Theme. Wie du eins erstellst, findest du hier.
  5. Die Schrift-Dateien in den „üblichen“ Formaten. Also meiner Meinung nach mindestens woff2.
  6. Optimalerweise hast du eine Staging- oder Übungsseite, um alles erst einmal zu probieren.
  7. Alles beginnt mit einem BackUp, dass du vor Arbeitsbeginn anlegst.

Schritt für Schritt an einem Beispiel

1. Auswahl der Schriftarten für das Projekt

Im Standard-Design zeigt sich das Schriftbild wie in der folgenden Abbildung gezeigt.

Abbildung der Standard-Fonts im Theme Twenty Twenty-Two
Abbildung der Standard-Fonts im Theme Twenty Twenty-Two. Website-Title, Seiten-Titel, Überschrften und Text.

Folgende Schriftarten sollen zukünftig genutzt werden:

1.1. Website-Titel im Header

Lobster“ normal in Schriftstärke Regular 400 für den Website-Titel im Header und ggf. im Footer.

"Almost before" mit Lobster dargestellt.
Lobster von Google-Fonts

1.2. Überschriften H1 bis H4

Inconsolata“ normal in Schriftstärke Regular 400 für alle Seiten- und Blog-Titel sowie alle Überschriften H1 bis H4.

"Almost before" mit Inconsolata dargestellt.
Inconsolata von Google-Fonts

1.3. Text und anderes

Open Sans“ normal und kursiv jeweils in Schriftstärke Regular 400 und SemiBold 600 für den Body etc.

"Almost before" mit Open Sans dargestellt.
Open Sans Regular von Google-Fonts

Damit wird sich ein folgendes Bild der oben gezeigten Abbildung ergeben:

TT2 mit den neuen Fonts beim Website-Title, Überschrift und Text
Ziel-Design in diesem Beispiel

2. Ein Child-Theme anlegen

Ein Child-Theme wird für die Einbindung der Schrift-Dateien benötigt.

Es gibt verschiedene Wege, um ein Child-Theme anzulegen. Ein sehr schneller Weg ist die Nutzung des Plugin „Generate Child Theme“. Eine sehr detaillierte Beschreibung des Plugin in deutscher Sprache findest du bei haurand.com.

Das Plugin "Generate Child Theme" im Plugin-Verzeichniss
Das Plugin „Generate Child Theme“.

Nachdem das Child-Theme erfolgreich angelegt wurde, sind sowohl das Kind-Theme und das Eltern-Theme in der WordPress-Installation vorhanden.

Child-Theme und Parent-Theme im Backend

(Nachdem das Child-Theme angelegt wurde, solltest du das Plugin „Generate Child Theme“ wieder deinstallieren.)

3. Schrift-Dateien bereitstellen

Der einfachste Weg, um die Schriftdateien zu erhalten, geht über die Website google-webfonts-helper. Einfach auswählen und herunterladen….

Logo der Website google-webfonts-helper

Nachdem die Schriften heruntergeladen sind, verschiebst du diese Dateien in einen Ordner. In diesem Beispiel nenne ich den Ordner „lokale_fonts“.

Die Schriftarten als woff2 Dateien im Ordner lokale_fonts

Upload ins Backend

Der neue Ordner „lokale_fonts“ muss jetzt in das Backend geladen werden. In diesem Beispiel hier:

Zum Upload nutzt du entweder den FTP-Zugang und ein Programm wie FileZilla oder ein Plugin zum Upload von Dateien ins Backend wie z.B. „WP File Manager„.

Der Ordner twentytwentytwo-child beinhaltet nach dem Upload folgende Ordner und Dateien:

Inhalt des Ordners twentytwentytwo-child

Vermutlich fehlt noch die theme.json Datei. Dazu kommen wir jetzt.

Die Schrifttypen im Theme einbinden und nutzbar machen

Wenn Du bis hierhin gekommen bist, ist das klasse. Jetzt fehlen noch zwei Schritte, um zum gewünschten Ergebnis zu kommen.

Hierfür gibt es eine Schnittstelle, für die wir die theme.json Datei im Child-Theme nutzen.

Es sind keine weiteren Einträge in der functions.php des Child-Themes erforderlich!

Die theme.json erstellen

Die Version bei der theme.json muss 2 sein.

Die Fonts werden unter settings -> typography -> fontFamilies angemeldet.

Das Prinzip muss so aussehen:

Abbildung der theme.json
Das Prinzip der theme.json zur Anmeldung von Schriftarten

Nach demselben Prinzip werden auch die anderen Schriftdateien eingebunden. Zusätzlich behalte ich auch die „System-Fonts“ und die „Source Serif Pro“ aus dem Twenty Twenty-Two im Child-Theme.

Damit ergibt sich bis hierher folgende theme.json, die du hier herunterladen kannst:

Diese – oder eine mit „deinen“ Schriften – gehört also – wie oben beschrieben – per Upload in das Child-Theme des Backends.