Schriften (Fonts) mit Create Block Theme am Beispiel Twenty Twenty-Three einbinden

Plugin Create Block Theme am Beispiel Twenty Twenty-Three – Schriften einbinden

Wenn man Schriften bei Block Themes einbinden möchte, geht das z. Zt. nur über die theme.json. Dazu hatte ich vor einiger Zeit einen Beitrag erstellt. Das Plugin Create Block Theme bietet aber jetzt eine wesentlich einfachere Möglichkeit, sowohl lokal gespeicherte Schriftarten (Local Font) wie auch Google Fonts einzubinden. Wie das funktioniert, erläutere ich am Beispiel von Twenty Twenty-Three in diesem Beitrag.

Test auf: http://localhost/fse/

Im ersten Teil meines Beitrags zum Plugin Create Block Theme hatte ich bereits erläutert, welche Optionen das Plugin bietet.

Mit dem Plugin Create Block Theme kann man …

  • ein Theme mit den vom Benutzer geänderten Dingen,
  • ein neues Theme auf Grundlage eines bereits bestehenden Block Themes,
  • ein Child-Theme zu dem Parent Theme oder
  • ein leeres Theme oder eine Stilvariation erstellen.
  • Google Fonts in das Theme einbetten oder
  • lokale Schriftarten in das Theme einbetten

Manage Theme Fonts

Nach der Installation gibt es bei dem Menüpunkt „Design“ weitere Optionen. Im ersten Beitrag habe ich beschrieben, welche Dinge man bei Klick auf den Menüpunkt „Create Block Theme“ machen kann.

In diesem Beitrag (Teil 2) geht es um den Menüpunkt „Manage Theme Fonts“.

Optionen bei Design ohne das Plugin
Optionen bei Design ohne das Plugin
Zusätzliche Optionen bei Design nach Aktivierung des Plugins Create Block Theme
Zusätzliche Optionen bei Design nach Aktivierung des Plugins

In einem Tweet kurz nach Veröffentlichung hat Carolina Nymark zu Recht den Wunsch geäußert, dass diese Funktion Teil des Site Editors werden sollte:

Hier klicken, um den Inhalt von Twitter anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Add Google Font

Wie bereits oben beschrieben, gibt es nach der Installation des Plugins zwei neue Menüoptionen unter „Design“.

Info

Mittlerweile existiert auch eine deutsche Übersetzung des Plugins, so dass sich die Darstellung mit den Screenshots in den beiden Beiträgen zum Plugin evtl. etwas anders präsentiert. Die Funktionalität hat sich dadurch natürlich nicht geändert.

Nach Auswahl des Menüpunkts „Theme-Schriften verwalten“ werden die aktuell bereits im Theme eingebetteten Fonts angezeigt und es besteht die Möglichkeit weitere Google Fonts einzubinden:

Create Blog Theme: Eingebettete Schriften
Create Blog Theme: Eingebettete Fonts

Um neue Schriften zuzufügen, braucht man lediglich auf den Button „Google Fonts zufügen“ zu klicken. Anschließend wählt man die Schrift und die Variante aus (im Beispiel „Roboto“ und 3 Varianten, die gelb markiert sind):

Die Schriften (Fonts) auswählen beim Plugin Create Block Theme
Die Schriften auswählen
Auswahl der Varianten bei Schriften (Fonts) beim Plugin Create Block Theme
Auswahl der Varianten

Anschließend klickt man weiter unten auf den Button „Füge Google Fonts zu deinem Theme hinzu“. Danach erfolgt die Meldung: „Die Schrift Roboto wurde zum Theme Twenty Twenty-Three hinzugefügt. Schriften verwalten“.

Wenn man sich das per FTP ansieht, dann erscheinen die Fonts in dem Ordner
...\wp-content\themes\twentytwentythree\assets\fonts

Der Ordner mit den Schriften bei Twenty Twenty-Three
Der Ordner mit den Fonts bei Twenty Twenty-Three

Achtung

Zum Zeitpunkt dieses Beitrags wurden die neu zugefügten Fonts direkt in den Ordner „fonts“ gespeichert. In einer früheren Version des Plugins scheint es wohl so gewesen zu sein, dass die Schriften in eigenen Ordnern unterhalb dieses Ordners gespeichert wurden.

Eintrag der Schriften in der theme.json

Die Fonts werden in dem Fall automatisch in die theme.json eingetragen:

Die Schrift Roboto in der theme.json bei Twenty Twenty-Three
Die Schrift Roboto in der theme.json bei Twenty Twenty-Three

Achtung

Seltsam fand ich, dass die gleiche Schrift mehrmals eingetragen wurde. Vielleicht ist das noch ein Fehler in dem Plugin. Allerdings lässt sich das Problem durch eine entsprechende Änderung der theme.json beheben.

Die doppelte Angabe hat jedoch keine Auswirkungen auf die Funktion.

Anschließend kann die Schrift bei den Blöcken zusätzlich zu den bereits vorhandenen Schriften ausgewählt werden:

Die Schrift Roboto beim Überschriften-Block
Die Schrift Roboto beim Überschriften-Block

Schriften und der Datenschutz

Natürlich stellt sich gerade aktuell die Frage, ob denn auch tatsächlich der Datenschutz berücksichtigt wird und die Schriften lokal eingebunden werden. Wie man in dem nachfolgenden Screenshot sehen kann, ist das der Fall. Hier habe ich die Schrift „IBM Plex Mono“ eingebunden. In der developer console, die man z. B. bei Chrome mit F12 aufrufen kann, ist das ersichtlich:

Datenschutz und Schriften (Fonts)
Datenschutz und Schriften (Fonts)

Mehr zum Thema Datenschutz findet ihr in dem folgenden Beitrag.

Add Local Font – lokale Schriften zufügen

Ähnlich funktioniert das bei lokalen Schriften. Wenn man bereits lokale Fonts auf seinem Rechner hat, können Fonts in ähnlicher Form hochgeladen werden. Nach Auswahl Design > Theme-Schriften verwalten und einem Klick auf den Button „Eine lokale Schrift hinzufügen“ kann man die Schrift durch Angabe der Datei auswählen. Die Schriftartendefinitionen werden in der Regel automatisch ausgefüllt und durch Klick auf den Button „Lade die lokalen Schriften zu deinem Theme hoch“ stehen auch diese Schriften zur Verfügung.

local font (lokale Schrift) Lobster beim Plugin Create Block Theme
local font (lokale Schrift) Lobster

Auch diese Fonts werden in die theme.json eingetragen.

Die Schrift (Font) Lobster in der theme.json bei Twenty Twenty-Three
Die Schrift Lobster in der theme.json bei Twenty Twenty-Three

Fazit

Mit dem Plugin Create Block Theme kann man auch auf sehr einfache Art Schriften einbinden. Damit entfällt das mühsame Anpassen der theme.json bei Block Themes wie z. B. Twenty Twenty-Three. Wie ich schon im ersten Teil erläutert habe, ist das Plugin eine großartige Hilfe, wenn man mit Block Themes arbeitet. Daher würde auch ich es sehr begrüßen, wenn diese Option in dieser Form in den Core aufgenommen wird.

Weitere Beiträge zum Thema


Mehr erfahren auf dieser Webseite

Create Block Theme: Fonts (Schriften) einbinden


Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Weitere interessante Beiträge rund um WordPress findest du hier

2 Gedanken zu „Schriften (Fonts) mit Create Block Theme am Beispiel Twenty Twenty-Three einbinden“

  1. Hallo Hans-Gerd,

    vielen Dank für Teil 1 und Teil 2 zu dem Plugin Create Block Theme. Wie von dir gewohnt, immer sehr Praxis nah. Beide Beiträge bieten eine gute Orientierung und helfen sicherlich auch Anfängern.

    Gruß Jonas

    Antworten

Schreibe einen Kommentar