Internetkurse Köln

An Schriftarten scheiden sich oft die Geister. Was die einen hinlänglich gut finden, gefällt anderen gar nicht. So kann ein Theme an sich den Ansprüchen entsprechen, aber der verwendete Font mag einfach nicht punkten. Dabei sollte das nicht das Kriterium sein. Die Schriftart lässt sich für jedes WordPress Theme ändern, so auch für die neuen Block Themes wie Twenty Twenty-Two. Dabei ist das Vorgehen nur etwas anders als bei althergebrachten Themes. Aber machbar ist es allemal. Und dabei sogar datenschutzkonform.

Für dieses Tutorial braucht es übrigens ein Child Theme für Ihr Block Theme. Denn die im Folgenden genannten Änderungen im Theme selbst würden das nächste Update nicht überleben.

1. Schriftart aussuchen, als Webfont erstellen und auf den Server laden

Zuerst einmal sollte gelten, dass der gewünschte Font nicht von Google Fonts geladen wird. Viele Themes, so auch Block Themes, bieten unterschiedliche Webfonts zur Auswahl, beziehen sie dann aber immer noch von Google Fonts. Dafür gibt es eigentlich keine Rechtfertigung. Schließlich können Sie den gewünschten Font auch selbst hosten.

WordPress folgt übrigens mit Twenty Twenty-Two diesem Prinzip und liefert im Unterverzeichnis .../assets/fonts die zur Auswahl stehenden Fonts gleich mit. Wenn Sie nun für Ihr WordPress Block Theme die Schriftart ändern wollen, sollten Sie das also auch tun.

Sie wählen also aus dem reichhaltigen Angebot von Google die Schriftart aus, die Ihnen gefällt. Dasselbe können Sie aber auch direkt beim Google Web Fonts Helper machen. Denn Google gibt nicht direkt die nötigen Formate aus. Vielmehr erhalten Sie dort Formate wie .ttf oder .otf, die Sie dann auch auf Ihrem Rechner installieren könnten. Was auch der Grund ist, weshalb Sie solche Dateien nicht als Webfont nutzen sollten. Zwar könnten Browser diese darstellen. Aber Google selbst weist darauf hin, dass Sie damit gegen die Lizenz verstoßen würden.

Für Ihre Website brauchen Sie also andere Formate. Und die sollten komprimiert sind – immerhin sollen sie möglichst schnell geladen werden. Hier sprechen wir von den Formaten .woff2 und .woff. Alle weiteren Formate, also .eot und .svg können Sie vernachlässigen, da sie mittlerweile echt veraltet sind.

Das erste Vorgehen für das Ändern der Schriftart für ein WordPress Block Theme lautet also:

1. Font aussuchen,
2. daraus eine .woff und eine .woff2 Datei generieren und
3. diese beiden Dateien dann auf ihren Server hochladen in ein Unterverzeichnis Ihres Themes. Sagen wir: .../IHR-CHILDTHEME/fonts/. Oder auch .../IHR-CHILDTHEME/assets/fonts.

2. WordPress Block Theme: Schriftart in der theme.json ändern

Bislang war alles so wie gehabt. Um die Schriftart auch in einem WordPress Block Theme ändern zu können, muss sie erst einmal auf dem Server vorhanden sein.

Nun geht es darum, dass das Block Theme Ihre Schriftart auch nutzt. Und dafür müssen wir mal wieder an die theme.json Ihres Themes ran. Allerdings würden Änderungen, die Sie – sagen wir – in Ihrem Twenty Twenty-Two vornehmen, ein Update nicht überleben. Deshalb braucht es ein Child Theme.

Eine Möglichkeit, die Schriftart mit den neuen Stilvorlagen, die es seit WordPress 6.0 für Block Themes gibt, zu ändern, sehe ich im Moment nicht. Denn es braucht mehr als das, was wir jetzt mit der theme.json tun. Und ich wüsste (noch) nicht, wie man der Stilvorlage Ihre eigene style.css oder functions.php zuordnen könnte.

Mit der theme.json habe ich mich hier im Blog schon ein wenig beschäftigt. So eben auch im Rahmen der Erstellung eines Child Themes, das auch eine theme.json benötigt.

Typographie ändern in den settings des Block Themes

Die gewünschte Änderung, die nun die Schriftart des Block Themes betrifft, hinterlegen Sie im Bereich "settings" und dort im Bereich "typography".

... 
},
{
"fontFamily": "\"Kalam\", sans-serif",
"name": "Kalam",
"slug": "kalam"
}

Das sorgt dafür, dass der Font im Website Editor als Auswahl zur Verfügung steht. Wobei sich der Anfang dieses Codes, also die drei Pünktchen, die schließende geschwungene Klammer und das Komma auf bereits vorhandene Angaben beziehen.

Im Beispiel benenne ich die Schriftart Kalam. Dort könnte natürlich auch Roboto stehen. Oder Open Sans. Oder welchen Font auch immer Sie sich ausgesucht haben. Ich habe für meine offene FSE-Baustelle Bloggerbrunch halt den Kalam-Font gewählt. Wenn auch nur, um keine Zweifel offen zu lassen, dass das Ganze auch funktioniert.

Nun braucht es aber noch weitere Änderungen in der theme.json. Der Website Editor ermöglicht es nämlich leider nicht, für – sagen wir – alle Überschriften eine andere Schriftart zu wählen als für alle anderen Text-Blöcke (Absätze, Listen, …).

Schriftart in den WordPress Block Theme styles ändern

Im Bereich "styles" der theme.json hingegen können Sie einzelnen Blocktypen und/oder HTML-Elementen Ihre Schriftart zuweisen. Also zum Beispiel für "core/post-title" oder "core/site-title" und bei den "elements" für die Überschriften h1 bis h6.

Die Änderung folgt dann immer dem gleichen Prinzip. Bei Twenty Twenty-Two wird so aus

"fontFamily": "var(--wp--preset--font-family--system-font",

dann einfach

"fontFamily": "var(--wp--preset--font-family--kalam",

Oder wie auch immer die Schriftart Ihrer Wahl heißt.

3. Änderung in der style.css

Der Font muss nun nur noch – wie gehabt – in der style.css Ihres Child-Themes per @font-face eingebunden werden. Dabei reicht es, wie oben schon erwähnt, das .woff2 und das .woff-Format zu nehmen.

@font-face {
font-family: 'Kalam';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/NAME-DER-FONT-DATEI.woff2') format('woff2'),
url('fonts/NAME-DER-FONT-DATEI.woff') format('woff');
}

Sollten Sie Ihre Webfont-Dateien in ein anderslautendes Verzeichnis (zum Beispiel assets/fonts/...) hochgeladen haben, müssen Sie – abgesehen vom Font-Namen – den Pfad natürlich auch entsprechend anpassen.

Nun gibt das Block Theme für all jene Elemente, die in der theme.json den Font zugeordnet bekommen haben, diesen auch aus.

Im Einzelfall lässt er sich – sofern der Website Editor dies vorsieht – aber auch anderen Blöcken zuordnen. Oder Sie wählen ihn anstelle des System Fonts für alle Elemente. Wobei sich ein Font wie Kalam dazu sicherlich gar nicht eignet.

Beitragsbild: Britta Kretschmer