Schriftarten (fonts) nutzen: Full Site Editing (FSE) und theme.json

Beitragsdatum:

18. April 2022

Letztes Update am:

10. November 2023

Autor:

hgg

Kategorien: Allgemein, Block-Editor, Full Site Editing, WordPress

Full Site Editing (FSE) und theme.json: Schriftarten (font family) nutzen – Protokoll einer Anpassung Schritt für Schritt

Dieser Beitrag ist quasi eine Art Dokumentation, in der ich protokolliere, wie ich vorgegangen bin, um andere Schriftarten zu nutzen. Dieses Feature stellt sicher auch ein Highlight in der kommenden WordPress 6.0 dar. Ziel war es, nach Erstellung eines Child Themes zusätzliche Schriftarten im Bedarfsfall für bestimmte Blöcke durch entsprechende Änderung der theme.json zu definieren. Ich muss gestehen, dass ich schon im Vorfeld einige Versuche unternommen hatte und teilweise krachend gescheitert war und/oder entnervt aufgegeben habe.

Damit dieser Beitrag nicht zu lang wird (und er ist schon lang), beschreibe ich hier kurz in Stichpunkten mit den entsprechenden Quellen, was ich vorher erledigt habe:

Ein Child Theme zu Twenty Twenty Two (TT2) erstellt.
Schriften ausgewählt (Lobster und Vibur).
Einen neuen Ordner /assets/fonts im Child Theme erstellt.
Die entpackten Schriften in den Ordner /assets/fonts kopiert (insbesondere die Dateien im Format WOFF2 sind wichtig).
Eine theme.json als Grundlage (siehe folgender Beitrag) erstellt und in den Theme-Ordner gespeichert.
Zusätzlich habe ich z. Zt. noch eine Betaversion von WordPress 6.0 und Gutenberg 13.0 installiert.

Außerdem möchte ich ergänzend zu diesem Beitrag auf einen Beitrag von Jonas verweisen, der sich ebenfalls mit der Problematik beschäftigt hat. In seinem Beitrag erläutert er die o. g. Schritte, die vorher erledigt werden müssen, ausführlich.

Das Problem: Die Bearbeitung der theme.json

Die Schwierigkeit besteht darin, dass (natürlich nicht nur) die Schriftart in der theme.json korrekt eingetragen wird. Es gibt meines Wissens kein Tool, das dabei hilfreich wäre. Ich arbeite mit dem Editor Visual Studio Code, der zumindest Fehler (fehlende Klammern, etc.) anmeckert. Wenn die theme.json dann korrekt erstellt ist, kann die Schriftart einem Block, z. B. Navigationsblock zugewiesen werden.

Fangen wir also mal an. Als Grundlage habe ich eine theme.json erstellt, die lediglich eine zusätzliche Schriftart („Lobster“) anbietet. Diese theme.json wird in den Ordner des Child Themes kopiert:

{
	"version": 2,
	
	"settings": {		

		"typography": {
			"fontFamilies": [
			  {
				"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
				"name": "Display Font",
				"slug": "system-font"
			  },
		      {  				
				"fontFamily": "\"Lobster Two\", serif",
				"name": "Lobster Two",
				"slug": "Lobster Two",
				"fontFace": [
   				  {
						"fontFamily": "Lobster Two",
						"fontWeight": "400",
						"fontStyle": "normal",
						"fontStretch": "normal",
						"src": [ "file:./assets/fonts/lobster-two-v17-latin-regular.woff2" ]
			 	  }
				]
			  }
			]
		}
	}
}

Die Schriftart „Lobster“ habe ich dem Navigationsblock zugewiesen:

Design > Editor (Beta)
Listenansicht aktivieren (oben links das Symbol mit den drei versetzten Strichen)
Aktivierung des Navigationsblocks
rechts oben auf das Zahnrad (Einstellungen) klicken (falls das noch nicht aktiviert ist)
Unter „Block“ auf Typography, rechts auf die drei Punkte
Auswahl „Font Family“ und dort als Schriftart „Lobster“ wählen.

Das ist wohl besser in dem folgenden kurzen Video zu sehen:

Full Site Editing: Schriften über theme.json ntuzen.

Beispiel 2 mit zwei Schriftarten: Lobster und Vibur

In der folgenden theme.json habe ich zusätzlich noch die Schriftart „Vibur“ definiert:

{
	"version": 2,
	
	"settings": {		

		"typography": {
			"fontFamilies": [
			  {
				"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
				"name": "Display Font",
				"slug": "system-font"
			  },
		      {  				
				"fontFamily": "\"Lobster Two\", serif",
				"name": "Lobster Two",
				"slug": "Lobster Two",
				"fontFace": [
   				  {
						"fontFamily": "Lobster Two",
						"fontWeight": "400",
						"fontStyle": "normal",
						"fontStretch": "normal",
						"src": [ "file:./assets/fonts/lobster-two-v17-latin-regular.woff2" ]
			 	  }
				]
			  },
			  {
					"fontFamily": "\"Vibur\", serif",
					"name": "Vibur",
					"slug": "Vibur",
					"fontFace": [
						{
							"fontFamily": "Vibur",
							"fontWeight": "400",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/vibur-v21-latin-regular.woff2" ]
						}
					]
				}			

			]
		}
	}
}

Seltsame Dinge oder nicht alle Blöcke sind gleich

Ich habe spaßeshalber die themes.json von dem Theme „Archeo“ genommen und um die o. g. Schriftarten ergänzt, weil das Theme bereits eine Option zur Verwendung von weiteren Schriftarten bietet. Insofern war der Grundgedanke, eine funktionierende theme.json zu verwenden und sie dann entsprechend zu ergänzen.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"customTemplates": [
		{
			"name": "blank",
			"title": "Blank",
			"postTypes": [
				"page",
				"post"
			]
		},
		{
			"name": "page-no-title",
			"title": "Page (No Title)",
			"postTypes": [
				"page"
			]
		}
	],
	"settings": {
		"appearanceTools": true,
		"color": {
			"palette": [
				{
					"slug": "foreground",
					"color": "#242321",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#FCFBF8",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#71706E",
					"name": "Primary"
				},
				{
					"slug": "tertiary",
					"color": "#CFCFCF",
					"name": "Tertiary"
				}
			]
		},
		"custom": {
			"spacing": {
				"small": "clamp(20px, 4vw, 40px)",
				"medium": "clamp(48px, 8vw, 100px)",
				"large": "clamp(100px, 12vw, 460px)",
				"outer": "min(4vw, 90px)"
			}
		},
		"layout": {
			"contentSize": "620px",
			"wideSize": "1260px"
		},
		"spacing": {
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		},
		"typography": {
			"fontFamilies": [
			  {
				"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
				"name": "Display Font",
				"slug": "system-font"
			  },
		      {  				
				"fontFamily": "\"Lobster Two\", serif",
				"name": "Lobster Two",
				"slug": "Lobster Two",
				"fontFace": [
   				  {
						"fontFamily": "Lobster Two",
						"fontWeight": "400",
						"fontStyle": "normal",
						"fontStretch": "normal",
						"src": [ "file:./assets/fonts/lobster-two-v17-latin-regular.woff2" ]
			 	  }
				]
			     },
			    {
					"fontFamily": "\"Vibur\", serif",
					"name": "Vibur",
					"slug": "Vibur",
					"fontFace": [
						{
							"fontFamily": "Vibur",
							"fontWeight": "400",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/vibur-v21-latin-regular.woff2" ]
						}
					]
				},			
				{
					"fontFamily": "\"Chivo\", sans-serif",
					"name": "Chivo",
					"slug": "chivo",
					"fontFace": [
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "100",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-Thin.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "400",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-Regular.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "700",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-Bold.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "100",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-ThinItalic.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "400",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-Italic.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "700",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-BoldItalic.woff2" ]
						}
					]
				}
			],
			"fontSizes": [
				{
					"name": "Small",
					"size": "16px",
					"slug": "small"
				},
				{
					"name": "Normal",
					"size": "18px",
					"slug": "normal"
				},
				{
					"name": "Medium",
					"size": "clamp(24px, 5vw, 32px)",
					"slug": "medium"
				},
				{
					"name": "Large",
					"size": "clamp(36px, 6vw, 48px)",
					"slug": "large"
				},
				{
					"name": "Huge",
					"size": "clamp(42px, 7vw, 64px)",
					"slug": "huge"
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/button": {
				"border": {
					"radius": "0"
				},
				"color": {
					"background": "var(--wp--preset--color--foreground)",
					"text": "var(--wp--preset--color--background)"
				},
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--chivo)",
					"fontSize": "var(--wp--preset--typography--font-size--normal)",
					"textTransform": "uppercase"
				}
			},
			"core/heading": {
				"typography": {
					"fontWeight": "100",
					"lineHeight": "1.1"
				}
			},
			"core/navigation": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"core/post-comments": {
				"elements": {
					"h3": {
						"typography": {
							"textTransform": "uppercase"
						}
					}
				},
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				},
				"spacing": {
					"padding": {
						"top": "var(--wp--custom--spacing--small)"
					}
				}
			},
			"core/post-navigation-link": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--medium)",
					"fontWeight": "100",
					"textTransform": "uppercase"
				}
			},
			"core/query-pagination": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"core/pullquote": {
				"border": {
					"width": "0"
				},
				"spacing": {
					"padding": {
						"top": "var(--wp--custom--spacing--medium)",
						"bottom": "var(--wp--custom--spacing--medium)"
					}
				},
				"typography": {
					"fontWeight": "100",
					"lineHeight": "1.2"
				}
			},
			"core/quote": {
				"border": {
					"width": "1px"
				}
			},
			"core/separator": {
				"color": {
					"background": "var(--wp--preset--color--foreground)"
				}
			},
			"core/site-title": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--normal)",
					"fontWeight": "400",
					"textTransform": "uppercase"
				}
			}
		},
		"color": {
			"background": "var(--wp--preset--color--background)",
			"text": "var(--wp--preset--color--foreground)"
		},
		"elements": {
			"h1": {
				"typography": {
					"fontSize": "clamp(48px, 8vw, 72px)"
				}
			},
			"h2": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--huge)"
				}
			},
			"h3": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--large)"
				}
			},
			"h4": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--medium)"
				}
			},
			"h5": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--normal)"
				}
			},
			"h6": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			}
		},
		"spacing": {
			"blockGap": "1.25rem"
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--chivo)",
			"fontSize": "var(--wp--preset--font-size--normal)",
			"fontWeight": "400",
 			"lineHeight": "1.6"
		}
	},
	"templateParts": [
		{
			"name": "header",
			"title": "Header",
			"area": "header"
		},
		{
			"name": "footer",
			"title": "Footer",
			"area": "footer"
		}
	]
}

Bei einigen Blöcken (z. B. Navigation) kann ich die Schriftart wählen, während ich bei einigen anderen Blöcken (z. B. Paragraph) keine Schriftart wählen kann. Warum das so ist, erschließt sich mir nicht. In dem unteren Fall wird automatisch die Schriftart „Times New Roman“ ausgegeben, siehe hier:

Geändert werden kann die Schriftart z. B. auf „Chivo“ wie folgt, wenn ich den folgenden Passus für den Absatz einfüge. Hier werden die Presets automatisch als Variable definiert und können dementsprechend verwendet werden.

	"styles": {
		"blocks": {
            "core/paragraph": {
                "color": {
                    "text": "var(--wp--preset--color--secondary)"
                },
                "typography": {
					          "fontFamily": "var(--wp--preset--font-family--chivo)",
 					          "fontSize": "var(--wp--preset--typography--font-size--normal)"
				}
      },

Wenn ich statt der Schriftart „Chivo“ die Schriftart „Vibur“ verwenden möchte, brauche ich nur die Variablenbezeichnung (preset) zu ändern. Also statt
"fontFamily": "var(--wp--preset--font-family--chivo)" dann eben
"fontFamily": "var(--wp--preset--font-family--vibur)".

Danach haben wir folgende Datei:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"customTemplates": [
		{
			"name": "blank",
			"title": "Blank",
			"postTypes": [
				"page",
				"post"
			]
		},
		{
			"name": "page-no-title",
			"title": "Page (No Title)",
			"postTypes": [
				"page"
			]
		}
	],
	"settings": {
		"appearanceTools": true,
		"color": {
			"palette": [
				{
					"slug": "foreground",
					"color": "#242321",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#FCFBF8",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#71706E",
					"name": "Primary"
				},
				{
					"slug": "tertiary",
					"color": "#CFCFCF",
					"name": "Tertiary"
				}
			]
		},
		"custom": {
			"spacing": {
				"small": "clamp(20px, 4vw, 40px)",
				"medium": "clamp(48px, 8vw, 100px)",
				"large": "clamp(100px, 12vw, 460px)",
				"outer": "min(4vw, 90px)"
			}
		},
		"layout": {
			"contentSize": "620px",
			"wideSize": "1260px"
		},
		"spacing": {
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		},
		"typography": {
			"fontFamilies": [
			  {
				"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
				"name": "Display Font",
				"slug": "system-font"
			  },
		      {  				
				"fontFamily": "\"Lobster Two\", serif",
				"name": "Lobster Two",
				"slug": "Lobster Two",
				"fontFace": [
   				  {
						"fontFamily": "Lobster Two",
						"fontWeight": "400",
						"fontStyle": "normal",
						"fontStretch": "normal",
						"src": [ "file:./assets/fonts/lobster-two-v17-latin-regular.woff2" ]
			 	  }
				]
			     },
			    {
					"fontFamily": "\"Vibur\", serif",
					"name": "Vibur",
					"slug": "Vibur",
					"fontFace": [
						{
							"fontFamily": "Vibur",
							"fontWeight": "400",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/vibur-v21-latin-regular.woff2" ]
						}
					]
				},			
				{
					"fontFamily": "\"Chivo\", sans-serif",
					"name": "Chivo",
					"slug": "chivo",
					"fontFace": [
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "100",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-Thin.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "400",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-Regular.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "700",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-Bold.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "100",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-ThinItalic.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "400",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-Italic.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "700",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-BoldItalic.woff2" ]
						}
					]
				}
			],
			"fontSizes": [
				{
					"name": "Small",
					"size": "16px",
					"slug": "small"
				},
				{
					"name": "Normal",
					"size": "18px",
					"slug": "normal"
				},
				{
					"name": "Medium",
					"size": "clamp(24px, 5vw, 32px)",
					"slug": "medium"
				},
				{
					"name": "Large",
					"size": "clamp(36px, 6vw, 48px)",
					"slug": "large"
				},
				{
					"name": "Huge",
					"size": "clamp(42px, 7vw, 64px)",
					"slug": "huge"
				}
			]
		}
	},
	"styles": {
		"blocks": {
            "core/paragraph": {
                "color": {
                    "text": "var(--wp--preset--color--secondary)"
                },
                "typography": {
					"fontFamily": "var(--wp--preset--font-family--vibur)",
					"fontSize": "var(--wp--preset--typography--font-size--normal)"
				}
            },
			"core/button": {
				"border": {
					"radius": "0"
				},
				"color": {
					"background": "var(--wp--preset--color--foreground)",
					"text": "var(--wp--preset--color--background)"
				},
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--chivo)",
					"fontSize": "var(--wp--preset--typography--font-size--normal)",
					"textTransform": "uppercase"
				}
			},
			"core/heading": {
				"typography": {
					"fontWeight": "100",
					"lineHeight": "1.1"
				}
			},
			"core/navigation": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"core/post-comments": {
				"elements": {
					"h3": {
						"typography": {
							"textTransform": "uppercase"
						}
					}
				},
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				},
				"spacing": {
					"padding": {
						"top": "var(--wp--custom--spacing--small)"
					}
				}
			},
			"core/post-navigation-link": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--medium)",
					"fontWeight": "100",
					"textTransform": "uppercase"
				}
			},
			"core/query-pagination": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"core/pullquote": {
				"border": {
					"width": "0"
				},
				"spacing": {
					"padding": {
						"top": "var(--wp--custom--spacing--medium)",
						"bottom": "var(--wp--custom--spacing--medium)"
					}
				},
				"typography": {
					"fontWeight": "100",
					"lineHeight": "1.2"
				}
			},
			"core/quote": {
				"border": {
					"width": "1px"
				}
			},
			"core/separator": {
				"color": {
					"background": "var(--wp--preset--color--foreground)"
				}
			},
			"core/site-title": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--normal)",
					"fontWeight": "400",
					"textTransform": "uppercase"
				}
			}
		},
		"color": {
			"background": "var(--wp--preset--color--background)",
			"text": "var(--wp--preset--color--foreground)"
		},
		"elements": {
			"h1": {
				"typography": {
					"fontSize": "clamp(48px, 8vw, 72px)"
				}
			},
			"h2": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--huge)"
				}
			},
			"h3": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--large)"
				}
			},
			"h4": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--medium)"
				}
			},
			"h5": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--normal)"
				}
			},
			"h6": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			}
		},
		"spacing": {
			"blockGap": "1.25rem"
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--chivo)",
			"fontSize": "var(--wp--preset--font-size--normal)",
			"fontWeight": "400",
 			"lineHeight": "1.6"
		}
	},
	"templateParts": [
		{
			"name": "header",
			"title": "Header",
			"area": "header"
		},
		{
			"name": "footer",
			"title": "Footer",
			"area": "footer"
		}
	]
}

Schriftarten für die Überschriften anpassen

Bei einigen Blöcken wird die Schriftart noch nicht verwendet. Um das zu ändern, nehmen wir wieder die letzte theme.json (theme_4.json) und ändern die entsprechenden Passagen für die Überschriften H1, H2 und H3 wie folgt:

		"elements": {
			"h1": {
				"typography": {
                "fontFamily": "var(--wp--preset--font-family--vibur)",
					      "fontSize": "clamp(48px, 8vw, 72px)"
				}
			},
			"h2": {
				"typography": {
                "fontFamily": "var(--wp--preset--font-family--vibur)",
					      "fontSize": "var(--wp--preset--font-size--huge)"
				}
			},
			"h3": {
				"typography": {
                "fontFamily": "var(--wp--preset--font-family--vibur)",
					      "fontSize": "var(--wp--preset--font-size--large)"
				}
			},

Danach werden die Überschriften H1, H2 und H3 in der Schriftart „Vibur“ dargestellt.

Da die theme.json wie oben beschrieben ja aus dem Theme „Archeo“ stammt, möchte ich als nächsten Schritt die hier erstellten Änderungen in die theme.json vom Block Theme (Parent Theme) Twenty Twenty Two übernehmen.


{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"customTemplates": [
		{
			"name": "blank",
			"title": "Blank",
			"postTypes": [
				"page",
				"post"
			]
		},
		{
			"name": "page-no-title",
			"title": "Page (No Title)",
			"postTypes": [
				"page"
			]
		}
	],
	"settings": {
		"typography": {
			"fontFamilies": [
			  {
				"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
				"name": "Display Font",
				"slug": "system-font"
			  },
		      {  				
				"fontFamily": "\"Lobster Two\", serif",
				"name": "Lobster Two",
				"slug": "Lobster Two",
				"fontFace": [
   				  {
						"fontFamily": "Lobster Two",
						"fontWeight": "400",
						"fontStyle": "normal",
						"fontStretch": "normal",
						"src": [ "file:./assets/fonts/lobster-two-v17-latin-regular.woff2" ]
			 	  }
				]
			     },
			    {
					"fontFamily": "\"Vibur\", serif",
					"name": "Vibur",
					"slug": "Vibur",
					"fontFace": [
						{
							"fontFamily": "Vibur",
							"fontWeight": "400",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/vibur-v21-latin-regular.woff2" ]
						}
					]
				},			
				{
					"fontFamily": "\"Chivo\", sans-serif",
					"name": "Chivo",
					"slug": "chivo",
					"fontFace": [
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "100",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-Thin.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "400",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-Regular.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "700",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-Bold.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "100",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-ThinItalic.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "400",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-Italic.woff2" ]
						},
						{
							"fontFamily": "Chivo",
							"fontDisplay": "block",
							"fontWeight": "700",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Chivo-BoldItalic.woff2" ]
						}
					]
				}
			]
		}
	},
	"styles": {
		"blocks": {
            "core/paragraph": {
                "color": {
                    "text": "var(--wp--preset--color--secondary)"
                },
                "typography": {
					"fontFamily": "var(--wp--preset--font-family--vibur)",
					"fontSize": "var(--wp--preset--typography--font-size--normal)"
				}
            },
			"core/button": {
				"border": {
					"radius": "0"
				},
				"color": {
					"background": "var(--wp--preset--color--foreground)",
					"text": "var(--wp--preset--color--background)"
				},
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--chivo)",
					"fontSize": "var(--wp--preset--typography--font-size--normal)",
					"textTransform": "uppercase"
				}
			},
			"core/heading": {
				"typography": {
					"fontWeight": "100",
					"lineHeight": "1.1"
				}
			},
			"core/navigation": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"core/post-comments": {
				"elements": {
					"h3": {
						"typography": {
							"textTransform": "uppercase"
						}
					}
				},
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				},
				"spacing": {
					"padding": {
						"top": "var(--wp--custom--spacing--small)"
					}
				}
			},
			"core/post-navigation-link": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--medium)",
					"fontWeight": "100",
					"textTransform": "uppercase"
				}
			},
			"core/query-pagination": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"core/pullquote": {
				"border": {
					"width": "0"
				},
				"spacing": {
					"padding": {
						"top": "var(--wp--custom--spacing--medium)",
						"bottom": "var(--wp--custom--spacing--medium)"
					}
				},
				"typography": {
					"fontWeight": "100",
					"lineHeight": "1.2"
				}
			},
			"core/quote": {
				"border": {
					"width": "1px"
				}
			},
			"core/separator": {
				"color": {
					"background": "var(--wp--preset--color--foreground)"
				}
			},
			"core/site-title": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--normal)",
					"fontWeight": "400",
					"textTransform": "uppercase"
				}
			}
		},
		"color": {
			"background": "var(--wp--preset--color--background)",
			"text": "var(--wp--preset--color--foreground)"
		},
		"elements": {
			"h1": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--vibur)",
					"fontSize": "clamp(48px, 8vw, 72px)"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--vibur)",
					"fontSize": "var(--wp--preset--font-size--huge)"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--vibur)",
					"fontSize": "var(--wp--preset--font-size--large)"
				}
			},
			"h4": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--medium)"
				}
			},
			"h5": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--normal)"
				}
			},
			"h6": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			}
		},
		"spacing": {
			"blockGap": "1.25rem"
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--chivo)",
			"fontSize": "var(--wp--preset--font-size--normal)",
			"fontWeight": "400",
 			"lineHeight": "1.6"
		}
	}
}

Wenn man sich die Website im Frontend ansieht, dann werden die Schriftarten schon richtig umgesetzt. Allerdings ist als Farbe für Absatz (Paragraph) eine hellrosa Farbe gesetzt, die natürlich auf einem weißen Hintergrund nicht gut lesbar ist.

Hier alle definierten Variablen:

body {
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--color--foreground: #000000;
    --wp--preset--color--background: #ffffff;
    --wp--preset--color--primary: #1a4548;
    --wp--preset--color--secondary: #ffe2c7;
    --wp--preset--color--tertiary: #F6F6F6;
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
    --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
    --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
    --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
    --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
    --wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
    --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
    --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
    --wp--preset--gradient--vertical-secondary-to-tertiary: linear-gradient(to bottom,var(--wp--preset--color--secondary) 0%,var(--wp--preset--color--tertiary) 100%);
    --wp--preset--gradient--vertical-secondary-to-background: linear-gradient(to bottom,var(--wp--preset--color--secondary) 0%,var(--wp--preset--color--background) 100%);
    --wp--preset--gradient--vertical-tertiary-to-background: linear-gradient(to bottom,var(--wp--preset--color--tertiary) 0%,var(--wp--preset--color--background) 100%);
    --wp--preset--gradient--diagonal-primary-to-foreground: linear-gradient(to bottom right,var(--wp--preset--color--primary) 0%,var(--wp--preset--color--foreground) 100%);
    --wp--preset--gradient--diagonal-secondary-to-background: linear-gradient(to bottom right,var(--wp--preset--color--secondary) 50%,var(--wp--preset--color--background) 50%);
    --wp--preset--gradient--diagonal-background-to-secondary: linear-gradient(to bottom right,var(--wp--preset--color--background) 50%,var(--wp--preset--color--secondary) 50%);
    --wp--preset--gradient--diagonal-tertiary-to-background: linear-gradient(to bottom right,var(--wp--preset--color--tertiary) 50%,var(--wp--preset--color--background) 50%);
    --wp--preset--gradient--diagonal-background-to-tertiary: linear-gradient(to bottom right,var(--wp--preset--color--background) 50%,var(--wp--preset--color--tertiary) 50%);
    --wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');
    --wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');
    --wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');
    --wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');
    --wp--preset--duotone--midnight: url('#wp-duotone-midnight');
    --wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');
    --wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');
    --wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');
    --wp--preset--duotone--foreground-and-background: url('#wp-duotone-foreground-and-background');
    --wp--preset--duotone--foreground-and-secondary: url('#wp-duotone-foreground-and-secondary');
    --wp--preset--duotone--foreground-and-tertiary: url('#wp-duotone-foreground-and-tertiary');
    --wp--preset--duotone--primary-and-background: url('#wp-duotone-primary-and-background');
    --wp--preset--duotone--primary-and-secondary: url('#wp-duotone-primary-and-secondary');
    --wp--preset--duotone--primary-and-tertiary: url('#wp-duotone-primary-and-tertiary');
    --wp--preset--font-size--small: 1rem;
    --wp--preset--font-size--medium: 1.125rem;
    --wp--preset--font-size--large: 1.75rem;
    --wp--preset--font-size--x-large: clamp(1.75rem, 3vw, 2.25rem);
    --wp--preset--font-family--system-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    --wp--preset--font-family--lobster-two: "Lobster Two", serif;
    --wp--preset--font-family--vibur: "Vibur", serif;
    --wp--preset--font-family--chivo: "Chivo", sans-serif;
    --wp--custom--spacing--small: max(1.25rem, 5vw);
    --wp--custom--spacing--medium: clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)));
    --wp--custom--spacing--large: clamp(4rem, 10vw, 8rem);
    --wp--custom--spacing--outer: var(--wp--custom--spacing--small, 1.25rem);
    --wp--custom--typography--font-size--huge: clamp(2.25rem, 4vw, 2.75rem);
    --wp--custom--typography--font-size--gigantic: clamp(2.75rem, 6vw, 3.25rem);
    --wp--custom--typography--font-size--colossal: clamp(3.25rem, 8vw, 6.25rem);
    --wp--custom--typography--line-height--tiny: 1.15;
    --wp--custom--typography--line-height--small: 1.2;
    --wp--custom--typography--line-height--medium: 1.4;
    --wp--custom--typography--line-height--normal: 1.6;
}

Wichtig ist hier die folgende Zeile, die für die hellrosa Farbe sorgt:
--wp--preset--color--secondary: #ffe2c7;

Diese Farbe wollen wir durch --wp--preset--color--primary: #1a4548; (das ist die definierte Schriftfarbe bei Twenty Twenty Two) ersetzen. Aus dem Grund ändern wir in der theme.json den entsprechenden Passus wie folgt:

"core/paragraph": {
                "color": {
                    "text": "var(--wp--preset--color--primary)"
                },
                "typography": {
					           "fontFamily": "var(--wp--preset--font-family--vibur)",
          			     "fontSize": "var(--wp--preset--typography--font-size--normal)"
				}

Nach Neuladen im Dashboard sieht man dann auch direkt, dass die Änderung sich bezogen auf die Absätze wie gewünscht ausgewirkt hat und die Farbe entsprechend anders umgesetzt wird.

Links und Quellen

Schriften auswählen:
https://google-webfonts-helper.herokuapp.com/fonts/
Dateien im Format WOFF2:
https://florianbrinkmann.com/glyphhanger-5576/
Managing Fonts in WordPress Block Themes
https://css-tricks.com/managing-fonts-in-wordpress-block-themes/
Referenz mit den Einstellungen und Stileigenschaften in der Datei theme.json:
https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/
Font Type im FSE (Full Site Editing):
https://www.wp-tipps.de/font-type-im-fse/
Der theme.json-Generator:
https://www.themegen.app/
Roadmap für WordPress 6.0:
https://wptavern.com/looking-ahead-to-wordpress-6-0-the-early-roadmap
WordPress 6.0 Beta 2 (u. a. Webfonts API: Manage local fonts with PHP or theme.json):
https://wordpress.org/news/2022/04/wordpress-6-0-beta-2/
A Pared Back Web Fonts API May Land in WordPress 6.0 or Not at All:
https://wptavern.com/a-pared-back-web-fonts-api-may-land-in-wordpress-6-0-or-not-at-all
Gutenberg 12.8 führt die Web Fonts API ein:
https://wptavern.com/the-wordpress-web-fonts-api-has-arrived
Implementierung einer Webfonts-API im WordPress Core:
https://make.wordpress.org/core/2021/09/28/implementing-a-webfonts-api-in-wordpress-core/
theme.json – Typografie-Optionen:
https://fullsiteediting.com/lessons/theme-json-typography-options/
WordPress 6.0 testen:
https://gutenbergtimes.com/wordpress-6-0-testing-testing-testing-woo-blocks-style-standards-and-more-weekend-edition-211/
Full Site Editing Outreach Program:
https://make.wordpress.org/test/handbook/full-site-editing-outreach-experiment/
Status of Webfonts API for WordPress 6.0 Inclusion:
https://make.wordpress.org/core/2022/04/22/status-of-webfonts-api-for-wordpress-6-0-inclusion/
Move webfonts handling to internal only (not accessible) – WP 6.0 Stopgap:
https://github.com/WordPress/gutenberg/issues/40472
Webfonts: register and enqueue fonts by font-family:
https://github.com/WordPress/gutenberg/pull/39559
Webfonts API: Ongoing Roadmap:
https://github.com/WordPress/gutenberg/issues/41479
Webfonts API: registration and enqueueing ambiguity:
https://github.com/WordPress/gutenberg/issues/40288
A proposal for creating an API to register and enqueue web fonts:
https://core.trac.wordpress.org/ticket/46370
Webfonts API: Document fontFace and it’s values in theme.json schema:
https://github.com/WordPress/gutenberg/pull/41844

Fazit

Während es bei klassischen Themes bereits viele Beiträge gibt, wie man Schriften einfügen kann, ist das Thema bei Block Themes und WordPress 6.0 erst mal Neuland. Die Implementierung ist zwar grundsätzlich kein Hexenwerk, aber die Bearbeitung der theme.json beim Full Site Editing muss man tatsächlich mit hoher Konzentration durchführen, um Fehler zu vermeiden. Dabei geht es nicht (nur) um syntaktische Fehler (z. B. fehlende oder überflüssige Klammern oder Kommas), sondern auch darum, die richtigen Stellen in der theme.json zu finden. Der Beitrag ist zumindest für mich ein Ansatz für zukünftige Erweiterungen nicht nur bezogen auf Schriften. Sollten sich bis zur Veröffentlichung von WordPress 6.0 im Mai noch Änderungen ergeben, werde ich diesen Beitrag aktualisieren. Wie das dann aussieht, kann man auf unserer Testseite sehen.

Weitere Beiträge zum Thema

Mehr erfahren auf dieser Webseite

Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über eine Kontaktaufnahme

02722-6577725

0241 9551861

info@haurand.com

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.

Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.
Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

Hinweis: Childtheme TT2 bei lokaler Instanz http://localhost/fse_neu

2 Antworten zu „Schriftarten (fonts) nutzen: Full Site Editing (FSE) und theme.json“

Peter

12. September 2022

Ach du Schreck! Ich beschäftige mich seit kurzem mit FSE und wollte mal eben Fonts verwenden, die nicht in Stile hinterlegt sind. Und naiv wie ich bin, dachte ich, das wird easypeasy. Sieht leider nicht so aus, auch wenn viel von dem Post hier nur codes sind, ist der Prozess doch ziemlich umständlich.
Gibt es ein Update, das den ganzen Zustand erleichtert? Oder ein Plugin? (Letzteres würde ich gern vermeiden, aber json finde ich abschreckender als ein Plugin…). Ich bin noch nicht ganz so weit im Gestaltungsprozess, dass ich die Schriften schon einbinden will, aber hoffentlich in Kürze

Antworten
1. hgg
  
  12. September 2022
  
  Hallo,
  danke für Deinen Kommentar. Ich habe das zum Anlass genommen und mal nachgeschaut, wie sich das weiter entwickelt hat.
  Es gibt in der Tat noch eine weitere Option der Einbindung: Über die WordPress Web Font API. Das scheint allerdings noch nicht ausgereift zu sein: „Die Aufgabe dieser API besteht darin, die Backend-Fähigkeiten bereitzustellen, um die „Schriftartbibliothek“ zu unterstützen, um die Schriftartverwaltung und das dynamische Erstellen der @font-faceStile einzuschließen.“ – Übersetzung aus Webfonts API: Ongoing Roadmap #41479.
  
  Noch umfassender auf die Nutzung der theme.json geht übrigens Carolina Nymark in ihrem grandiosen Blog im folgenden Beitrag ein: https://fullsiteediting.com/lessons/theme-json-typography-options/
  
  Ellen Bauer empfiehlt in einem weiteren Beitrag, die Möglichkeiten des Themes zu mutzen und Schriftarten zu ändern oder eigene hinzuzufügen, sobald weitere FSE-Funktionen eingeführt werden.
  
  Aber ich gebe Dir durchaus recht: Zum jetzigen Zeitpunkt ist die Einbindung eigener Schriftarten über die theme.json sicher nicht besonders benutzerfreundlich, zumal zum jetzigen Zeitpunkt (September 2022) auch nicht bei allen Blöcken die Verwendung der Schriftarten angeboten wird. Da hoffe ich ebenfalls noch auf eine vereinheitlichte Form.
  
  Antworten