Wie Schrift in TT2 ändern?

Gelöst Karl
(@zittau)

vor 1 Jahr, 10 Monaten
Hallo

mit WP 5.9 erschien das Standarttheme Twenty Twenty-Two. Hat jemand schon ergründet, wie die Schrift in diesem neuen Theme geändert wird?

Karl
- Dieses Thema wurde geändert vor 1 Jahr, 10 Monaten von Karl.
- Dieses Thema wurde geändert vor 1 Jahr, 10 Monaten von Karl.

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 24)

1 2 →

Thread-Starter Karl
(@zittau)

vor 1 Jahr, 10 Monaten
(doppelten Eintrag gelöscht)
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr, 10 Monaten

Du kannst unter Design > Editor die „Globalen Stile“ anpassen:

(zum Vergrößern anklicken)

Dabei hast du allerdings (im Moment?) nur die Auswahl zwischen zwei Schriftarten, die das Theme vorgibt.

Weiter unten in der Sidebar gibt es einen Menüeintrag „Blöcke“, in dem du für jeden einzelnen Block Gestaltungsvorgaben machen kannst, die sich auf die gesamte Website auswirken. Hier kann ich im Moment aber nur die Schriftgröße und den Schriftschnitt einstellen.

bscu
(@bscu)

vor 1 Jahr, 10 Monaten

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

Per CSS?!
Thread-Starter Karl
(@zittau)

vor 1 Jahr, 10 Monaten
@pixolin
Danke für die AW.

Dabei hast du allerdings (im Moment?) nur die Auswahl zwischen zwei Schriftarten, die das Theme vorgibt.

Sehr gern würde ich jedoch eine eigene andere Schrift verwenden, als die vom Theme vorgegebenen. Wie ist das bitte möglich?
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr, 10 Monaten

Gute Frage, die ich im Moment so noch nicht beantworten kann.

Das Theme gibt wie gesagt nur zwei Schriftarten vor und du kannst angeben, ob ein Block die eine oder andere Schriftart verwenden soll. Das ist zugegeben etwas wenig.

Bisher habe ich mich noch nicht eingelesen, ob hier ein Child-Theme eine optimale Lösung wäre. Laut dieser Seite kann dann eine eigene theme.json-Datei angelegt werden, in der die Schriftarten definiert werden: https://fullsiteediting.com/lessons/global-styles/#h-typography

Zusätzlich müssten die Schriftarten für ein lokales Hosting im Theme über die CSS eingebunden werden.

Alternativ gibt es sicher die Möglichkeit, mit eigenen CSS-Regeln die Layoutvorgaben des Themes zu überschreiben, wobei ich es so verstehe, dass das Eingabefeld für Zusätzliches CSS (das es bei den traditionellen Themes im Customizer gibt) bewusst weggelassen wurde, weil Design-Änderungen nun über die Globalen Stile erfolgen sollen. Außerdem müssten auch die Fonts irgendwo abgelegt werden, damit die Website DSGVO-konform bleibt – was wieder auf ein Child-Theme hinausläuft.

Eine weitere Alternative wäre die Verwendung eines Plugins, das Schriften (bitte DSGVO-konform!) einbettet und Änderungen an der Gestaltung des Themes vornimmt.

Vielleicht kann ich dir mehr verraten, wenn ich mich näher mit Child-Themes von Block-Themes beschäftigt habe. Wahrscheinlich kennst du dich aber bereits besser aus als ich – ich lerne gerne dazu.
Thread-Starter Karl
(@zittau)

vor 1 Jahr, 10 Monaten
@pixolin
Danke.
Auch ich bleibe d’ran. Wenn ich eine Lösung fand, kann ich mich noch mal melden.
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
Jonas
(@elbsegler)

vor 1 Jahr, 10 Monaten
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, 10 Monaten von Jonas.
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Jonas.
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Jonas.
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Jonas. Grund: Korrekturen im Layout
Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 10 Monaten

Hallo Jonas,
super – herzlichen Dank für die umfangreiche Antwort.
Viele Grüße
Hans-Gerd
Thread-Starter Karl
(@zittau)

vor 1 Jahr, 10 Monaten
@elbsegler

Jonas, großen, herzlichen Dank, es hat alles bestens funktioniert!!
Karl
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
Moderator Angelika Reisiger
(@la-geek)

vor 1 Jahr, 10 Monaten
Hallo @elbsegler

danke für deine Mühen, so weit war ich auch schon vor einigen Tagen, ich hab die Anleitungen auf der Website full site editing plus Github (Theme-Experiments) plus weiterführende Links wie diesen (sehr aufschlussreich) auch gelesen und ausprobiert.

Woran ich kläglich scheitere, ist das Hinzufügen von svg, eot, ttf, also das
```
src: url('../fonts/lobster-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lobster-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lobster-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lobster-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lobster-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lobster-v27-latin-regular.svg#Lobster') format('svg'); /* Legacy iOS */
}
```
Ich hab die Anleitungen rauf und runter samt aller Verzweigungen durchexerziert, doch überall wird, wenn überhaupt, nur eins z. B. woff2 verlinkt. Ich hab alle möglichen Varianten auch selbst durchdacht, getestet und letztendlich aufgeben.

Denn nur mit WOFF2 ist es lediglich die halbe Miete, abwärtskompatible und mobiletaugliche Schriftformate fehlen.

Gibt es dafür eine Lösung? Irgendwo hatte ich auch gelesen, dass das Einbinden von Schriften noch nicht komplett möglich wäre.
Thread-Starter Karl
(@zittau)

vor 1 Jahr, 10 Monaten
Hallo @la-geek,

Du musst vorher die Schriften mit einem TTF-zu-WOFF-Konverter konvertieren und diese dann in den von Jonas beschriebenen Schriftenordner laden.
So hat es schließlich bei mir — Dank Jonas ausgezeichneter Beschreibung — bestens geklappt…
Karl
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
Moderator Angelika Reisiger
(@la-geek)

vor 1 Jahr, 10 Monaten

@zittau

Danke dir, aber es geht darum, alle Formate einzubinden für alle möglichen Geräte. Ich denke nicht, dass ein TTF, das zu WOFF konvertiert wurde, dann auf Geräten funktioniert, die nur das TTF-Format umsetzen können?

Du kannst dir alle (oder fast alle?) Google-Webfonts-Schriften übrigens von dort in allen Formaten herunterladen:

https://google-webfonts-helper.herokuapp.com/fonts
Thread-Starter Karl
(@zittau)

vor 1 Jahr, 10 Monaten
@la-geek

Auf meinem (Android-)Smartphone wird meine geänderte Schrift auf der Webseite einwandfrei ausgegeben …
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Karl.
Moderator Angelika Reisiger
(@la-geek)

vor 1 Jahr, 10 Monaten

Dann kann dein Android mit WOFF umgehen 🙂
Jonas
(@elbsegler)

vor 1 Jahr, 10 Monaten
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.