Wie Schrift in TT2 ändern?

Hat jemand schon ergründet, wie die Schrift in diesem neuen Theme geändert wird?

Per CSS?!

Hallo ihr,

ich versuche mich mal an einer Antwort. Allerdings ist es nicht ganz einfach.
Als Erstes, wie ihr schon vermutet habt, benötigt ihr ein Child-Theme.
Wenn das steht, benötigt ihr die Schriften in den üblichen Formaten. Ich halte mich im Weiteren an WOFF2. Aber es geht auch mit WOFF und so weiter. Die Dateien legt ihr in einem Ordner des Child-Themes ab. Ich nutze hier zur Veranschaulichung den Ordner-Namen: lokale_fonts – Ich nutze hier die Schrift Lobster.

Als zweites geht ihr in die function.php des Child-Themes und registriert die Schriften:

if ( ! function_exists( 'twentytwentytwo_get_font_face_styles' ) ) :
		function twentytwentytwo_get_font_face_styles() 
	{
	return "
			@font-face {
				font-family: 'Lobster';		
				src: url('" . get_theme_file_uri( 'lokale_fonts/Lobster-Regular.woff2' ) . "') format('woff2');
				font-weight: normal;
				font-style: normal;
				font-display: swap;
	}
";
}	
endif;
?>

Noch dabei?
Als Drittes geht es in die theme.json des Child Themes.
Ungefähr bei Zeile 170 findet ihr die Fonts mit ihrer Sichtbarkeit im Pulldown. Außerdem noch mal ganz unten noch einmal die Zuordnungen zu den Elementen etc. Da müsst ihr ein wenig gucken.

Also der Reihe nach:

In settings -> typografy ->“fontFamilies“ zusätzlich zu den bestehenden:

{
"fontFamily": "\"Lobster\", cursiv",
	"name": "Lobster",
	"slug": "lobster"
},

Achtung, das letzte Komma oben entfällt, wenn es der letzte Eintrag in der „fontFamilies“ ist.

Jetzt seht ihr die Schrift im Pulldown. Oder?

Letzter Schritt:
Unter styles -> typography könnt ihr die Default Schrift für den Body ändern. Einfach

Und noch: Die Überschriften (H1 bis H6) hat diese theme.json ebenfall vorgeben.
Bei styles -> elements H1 bis H6 könnt ihr die Font Familie ändern. Und auch Font Weight und Size.

z.B. so:

"h1": {
	"typography": {
	"fontFamily": "var(--wp--preset--font-family--lobster)",
	"fontWeight": "400",
	"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
					"fontSize": "var(--wp--custom--typography--font-size--medium"

Absolut ungewohnt!

• Diese Antwort wurde geändert vor 1 Jahr, 1 Monat von Jonas.
• Diese Antwort wurde geändert vor 1 Jahr, 1 Monat von Jonas.
• Diese Antwort wurde geändert vor 1 Jahr, 1 Monat von Jonas.
• Diese Antwort wurde geändert vor 1 Jahr, 1 Monat von Jonas. Grund: Korrekturen im Layout

Moin,

wenn ich in meinem Beispiel die Schrift im Dateiformat WOFF oder ttf exklusiv einbinde, scheint es zu funktionieren.
Also z.B. so:

@font-face {
font-family: 'Lobster';
src: url('" . get_theme_file_uri( 'lokale_fonts/Lobster-Regular.ttf' ) . "') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

oder entsprechend mit WOFF.
Ob man/frau also jedes Format in einzelnen @font-face {….} Abschnitten einbinden muss? Wäre zu probieren.

Ich bin recht sicher, dass inzwischen fast jedes Gerät WOFF (nicht WOFF2) anzeigen kann. Aber klar: nicht jedes mobile Endgerät. Daher muss die Rückfallschrift gut gewählt werden. Vielleicht hier mal schauen, wenn ihr noch tiefer in die Formate absteigen wollt: https://caniuse.com/?search=woff.

TT2 liefert „out of the Box“ den Font „Source Serif Pro“ ebenfalls nur als WOFF2 aus.