Typografie und Farben in WordPress global im Website-Editor festlegen

Wer mit einem Block-Theme wie Twenty Twenty-Five arbeitet, legt Schriften und Farben nicht mehr in einzelnen Beiträgen oder per CSS fest, sondern einmal zentral im Website-Editor. So sehen Überschriften, Links und Buttons überall gleich aus. Gleichzeitig ist der Bereich „Stile“ verschachtelt, und eine unbedachte Auswahl kann dutzende Blöcke auf einmal verändern. Diese Anleitung zeigt Schritt für Schritt, wie Sie eine Firmenfarbe in die Palette aufnehmen, eine eigene Schrift datenschutzfreundlich einbinden, Überschriften und Links global einstellen und Änderungen über Revisionen wieder zurückholen.

Voraussetzungen

• WordPress: eine aktuelle Version, getestet mit WordPress 7.1.2. Die Menüpfade in dieser Anleitung stammen aus der deutschen Oberfläche dieser Version.
• Theme: ein Block-Theme, zum Beispiel Twenty Twenty-Five. Klassische Themes zeigen unter Design keinen Eintrag Editor mit Stilen, sondern den Customizer.
• PHP: 7.4 oder neuer, empfohlen 8.3 oder 8.4.
• Zugriff: Backend-Zugang mit der Rolle Administrator. FTP oder SSH ist nicht nötig. Für die Prüfung per Kommandozeile hilft WP-CLI.
• Material: Farbwerte Ihres Corporate Designs als Hexcode, gegebenenfalls eigene Schriftdateien im Format WOFF2, WOFF, TTF oder OTF mit passender Lizenz für den Web-Einsatz.
• Backup: eine aktuelle Sicherung der Datenbank. Die Stile liegen dort und nicht in Dateien.

Schritt 1: Verstehen, wo die Einstellungen landen

Ein Block-Theme bringt seine Grundeinstellungen in der Datei theme.json mit. Was Sie im Website-Editor unter „Stile“ ändern, schreibt WordPress nicht in diese Datei, sondern in einen eigenen Datensatz vom Typ wp_global_styles in der Datenbank. Diese Ebene liegt über der des Themes und gewinnt deshalb. Das hat drei praktische Folgen.

Erstens übersteht die Gestaltung ein Theme-Update, weil das Update die Datenbank nicht anfasst. Zweitens gehört der Datensatz zum jeweiligen Theme. Im Test hieß er wp-global-styles-twentytwentyfive. Wechseln Sie das Theme, fängt das neue Theme mit seinen eigenen Voreinstellungen an. Drittens muss Ihr Backup die Datenbank enthalten, sonst ist die Gestaltung bei einer Wiederherstellung weg.

Wenn Sie die Werte lieber versioniert in einer Datei pflegen, etwa weil mehrere Websites dasselbe Design bekommen, ist ein Child-Theme mit eigener theme.json der bessere Weg. Die Anleitung Block-Theme anpassen mit theme.json beschreibt diesen Weg. Für eine einzelne Firmen-Website reicht der Website-Editor in den meisten Fällen.

Verifizieren: Öffnen Sie Design > Editor. In der linken Spalte erscheint der Eintrag Stile. Fehlt der Menüpunkt Editor, ist kein Block-Theme aktiv.

Schritt 2: Die Bereiche des Stile-Menüs kennenlernen

Unter Design > Editor > Stile finden Sie in WordPress 7.1 diese Einträge: Stile durchstöbern, Typografie, Farben, Hintergrund, Schatten, Layout und ganz unten Blöcke.

Bereich	Wirkung	Risiko
Stile durchstöbern	fertige Stilvarianten, Farbvarianten und Schriftkombinationen des Themes	hoch, eine Auswahl ändert viele Blöcke gleichzeitig
Typografie	Schriften, Schriftgrößenvorgaben und Schrift je Element	mittel
Farben	Palette und Farben je Element	mittel
Blöcke	Gestaltung einzelner Blocktypen für die ganze Website	niedrig, wirkt nur auf einen Blocktyp

Wie groß die Wirkung sein kann, zeigte der Test. Die Auswahl der Schriftkombination „Vollkorn & Fira Code“ unter Stile durchstöbern hat nicht nur die Grundschrift getauscht. Der Speicherdialog listete zusätzlich Änderungen an sechs Blöcken (Name des Autors, Beitragsbegriffe, Titel, Zitatkasten, Zitat, Website-Titel) und an den Elementen Button, Überschrift und H1. Nutzen Sie solche Varianten als Ausgangspunkt und passen Sie danach gezielt an, statt ständig zu wechseln.

Verifizieren: Solange unten links „Gespeichert“ steht, haben Sie beim Umsehen nichts verändert.

Schritt 3: Firmenfarben in die Palette aufnehmen

Legen Sie Ihre Firmenfarben als eigene Palettenfarben an, statt sie in jedem Block per Hexcode einzutippen. So ändern Sie sie später an einer Stelle.

1. Öffnen Sie Stile > Farben und klicken Sie auf Palette bearbeiten.
2. Im Register Farbe sehen Sie unter Theme die mitgelieferten Farben, bei Twenty Twenty-Five etwa „Base“, „Contrast“ und „Accent 1“ bis „Accent 6“. Darunter steht Individuell.
3. Klicken Sie bei Individuell auf das Plus mit der Beschriftung Farbe hinzufügen. WordPress legt „Farbe 1“ an.
4. Überschreiben Sie den Namen, zum Beispiel mit „Firmenblau“. Klicken Sie auf das Farbfeld links daneben, stellen Sie im Auswahlfeld auf Hex und tragen Sie den Wert ein, etwa 1E4E8C.
5. Klicken Sie auf Fertig.

Wählen Sie einen sprechenden Namen, denn WordPress bildet daraus den internen Bezeichner. Aus „Firmenblau“ wurde im Test custom-firmenblau und im Frontend die CSS-Variable --wp--preset--color--custom-firmenblau. Benennen Sie die Farbe später um, bleibt der alte Bezeichner in bereits gestalteten Blöcken stehen.

Achten Sie auf ausreichenden Kontrast zum Hintergrund. Die WCAG verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 zu 1. Das ist auch für die Anforderungen des Barrierefreiheitsstärkungsgesetzes relevant, mehr dazu in der Anleitung Barrierefreiheit nach BFSG umsetzen.

Verifizieren: Die neue Farbe erscheint unter Individuell und in jedem Farbwähler des Editors, etwa beim Absatz-Block unter Textfarbe.

Schritt 4: Eine eigene Schrift lokal einbinden

Seit einigen Versionen bringt WordPress eine eigene Schriftverwaltung mit. Sie erreichen sie unter Design > Schriften oder im Website-Editor unter Typografie > Schriften verwalten. Es gibt drei Register: Bibliothek, Upload und Schriften installieren.

Das Register Schriften installieren verbindet sich mit Google Fonts, aber erst, nachdem Sie auf Zugriff auf Google Fonts erlauben geklickt haben. WordPress lädt die gewählten Schriften dann einmalig herunter und speichert sie auf Ihrem Server. Besucher laden sie von dort und nicht von Google. Für das Frontend ist das datenschutzrechtlich die saubere Lösung. Beim Installieren baut allerdings Ihr Server eine Verbindung zu Google auf.

Wer ganz ohne diese Verbindung arbeiten möchte oder eine lizenzierte Hausschrift hat, nutzt das Register Upload. Unterstützt werden laut Oberfläche .ttf, .otf, .woff und .woff2. WOFF2 ist das kleinste Format und für das Web die erste Wahl.

1. Öffnen Sie Design > Schriften > Upload.
2. Wählen Sie unter Schrift hochladen die Schriftdateien aus, am besten gleich alle benötigten Schnitte (Normal, Fett, Kursiv).
3. WordPress meldet „Die Schriften wurden erfolgreich installiert.“

Im Test landete die Datei unter wp-content/uploads/fonts/. In der Bibliothek steht die Schrift danach unter Individuell mit dem Hinweis, wie viele Varianten aktiv sind. Wie Sie bestehende Google-Einbindungen von Themes und Plugins aufspüren, zeigt die Anleitung Google Fonts lokal einbinden.

Verifizieren: Öffnen Sie Stile > Typografie. Unter Schriften erscheint die neue Schrift mit der Anzahl ihrer Varianten.

Schritt 5: Schriften und Farben den Elementen zuweisen

Eine Schrift in der Bibliothek oder eine Farbe in der Palette ändert noch nichts am Aussehen. Erst die Zuordnung zu Elementen wirkt auf die Website.

Typografie: Unter Stile > Typografie stehen im Abschnitt Elemente die Einträge Text, Links, Überschriften, Beschriftungen und Buttons. Bei Überschriften können Sie oben zwischen Alle und den Ebenen H1 bis H6 wählen. Darunter stellen Sie Schrift, Design (Schriftstärke und Stil), Zeilenhöhe, Zeichenabstand, Schreibweise und Textausrichtung ein. Beginnen Sie mit Alle und weichen Sie nur bei einzelnen Ebenen ab.

Schriftgrößen: Unter Typografie > Schriftgrößenvorgaben finden Sie die Größen des Themes, bei Twenty Twenty-Five von „Small“ bis „Extra Extra Large“. Ändern Sie hier eine Vorgabe, passen sich alle Blöcke an, die diese Größe nutzen.

Farben: Unter Stile > Farben weisen Sie im Abschnitt Elemente Farben für Link, Beschriftungen, Button und Überschrift zu. Beim Link gibt es getrennte Register für Standard und Bei Mauszeigerkontakt. Wählen Sie dort Ihre Palettenfarbe aus dem Bereich Individuell.

Speichern: Unten links erscheint nach jeder Änderung ein Hinweis wie „1 Änderung überprüfen …“. Ein Klick darauf öffnet den Dialog Änderungen überprüfen. Er listet unter Globale Stile genau, was sich ändert, zum Beispiel „Element: Überschrift.“. Lesen Sie diese Liste, bevor Sie auf Speichern klicken.

Verifizieren: Rufen Sie die Website in einem privaten Browserfenster auf. Überschriften und Links zeigen die neue Schrift und Farbe. Im Seitenquelltext finden Sie die Variable Ihrer Palettenfarbe.

Schritt 6: Revisionen nutzen und Stile sichern

Jedes Speichern legt eine Revision an. Die Liste erreichen Sie, wenn Sie im Website-Editor eine Vorlage oder Seite öffnen, rechts oben auf das Symbol Stile klicken und dann auf Revisionen. Im Test standen dort alle vier Speichervorgänge mit Benutzer und Zeitpunkt sowie ganz unten die Standard-Stile des Themes. Ein Klick auf einen Eintrag zeigt eine Vorschau, Anwenden übernimmt ihn in den Editor. Wirksam wird das erst nach einem erneuten Speichern.

Über das Menü Mehr (drei Punkte) im selben Bereich finden Sie Stile zurücksetzen. Im Test entfernte das nach dem Speichern alle eigenen Farben und Schriftzuordnungen, der Datensatz enthielt danach nur noch leere Einstellungen. Die hochgeladene Schrift blieb in der Bibliothek erhalten, und die vorherigen Stände standen weiter in den Revisionen. Das Zurücksetzen ist also umkehrbar, solange die Revisionen existieren.

Revisionen ersetzen kein Backup. Sie liegen in derselben Datenbank und sind bei einem Datenbankschaden ebenfalls betroffen. Mit WP-CLI prüfen Sie, ob ein Stil-Datensatz existiert:

wp post list --post_type=wp_global_styles --fields=ID,post_name,post_title

Die Ausgabe im Test lautete:

ID	post_name	post_title
6	wp-global-styles-twentytwentyfive	Custom Styles

Den Inhalt zeigt wp post get 6 --field=post_content als JSON. Eine Datenbanksicherung, wie in der Anleitung WordPress-Datenbank mit WP-CLI sichern beschrieben, enthält diesen Datensatz automatisch. Wer Stile regelmäßig anpasst, sollte vor größeren Umgestaltungen eine Sicherung anlegen und das Theme aktuell halten, damit neue Editor-Funktionen und Sicherheitskorrekturen ankommen. Wer diese laufende Pflege nicht selbst übernehmen möchte, kann sie abgeben: Die WordPress-Wartung von wordpressupdate.de spielt Updates von WordPress, Plugins und Themes mit Kompatibilitätsprüfung ein und sichert die Website wöchentlich auf externen Speicher.

Zusätzlich können Sie das gesamte Theme samt Ihrer Stile exportieren: im Editor über Optionen (drei Punkte oben rechts) und Exportieren. Im Test enthielt die theme.json im erzeugten ZIP-Archiv die individuelle Palettenfarbe und die Schriftzuordnung der Überschriften. So lässt sich ein Design auf eine Testinstallation übertragen.

Verifizieren: Die Revisionsliste zeigt Ihren letzten Speichervorgang mit dem Vermerk Aktiv. Der WP-CLI-Befehl liefert genau einen Datensatz für Ihr aktives Theme.

Typische Fehler

• Eine Änderung im Stile-Menü wirkt nicht: Der betroffene Block hat eine eigene Einstellung, die gewinnt. Wählen Sie den Block aus und setzen Sie in der Seitenleiste Farbe oder Typografie zurück.
• Nach einer Stilvariante sieht die halbe Website anders aus: Stilvarianten und Schriftkombinationen ändern viele Blöcke gleichzeitig. Über die Revisionen den Stand davor anwenden und speichern.
• Die hochgeladene Schrift erscheint fett statt normal: Es fehlt der passende Schnitt. Laden Sie alle Schnitte hoch, die das Theme verwendet, oder wählen Sie unter Design eine vorhandene Stärke.
• Nach dem Theme-Wechsel sind Farben und Schriften weg: Die Stile gehören zum vorherigen Theme. Sie sind nicht gelöscht und kehren zurück, wenn Sie das alte Theme wieder aktivieren. Für das neue Theme stellen Sie sie neu ein oder übertragen sie per Export.
• Der Menüpunkt Editor fehlt: Ein klassisches Theme ist aktiv. Dort erreichen Sie Farben und Schriften, soweit das Theme sie anbietet, über Design > Customizer.

Häufige Fragen

Brauche ich für eigene Farben und Schriften ein Child-Theme?

Nein. Die Einstellungen im Website-Editor überstehen Theme-Updates, weil sie in der Datenbank liegen. Ein Child-Theme lohnt sich, wenn Sie das Design versionieren oder auf mehrere Websites übertragen wollen.

Ist die Installation über „Schriften installieren“ DSGVO-konform?

Die Schriften werden auf Ihrem Server gespeichert und von dort ausgeliefert, Besucherdaten gehen dabei nicht an Google. Nur beim Installieren verbindet sich Ihr Server einmalig mit Google. Prüfen Sie trotzdem, ob Theme oder Plugins weitere externe Schriften laden.

Können Redakteure die globalen Stile verändern?

Website-Editor und Schriftverwaltung prüfen die Berechtigung edit_theme_options, die standardmäßig nur Administratoren haben. Redakteure können in Beiträgen Farben aus der Palette wählen, aber die Palette selbst nicht ändern.

Testumfang

Wir haben die Anleitung mit WordPress 7.1.2 und Twenty Twenty-Five durchgespielt, von der eigenen Firmenfarbe über eine hochgeladene Schrift bis zum Zurücksetzen der Stile. Aufgefallen ist uns vor allem, wie viele Blöcke eine einzige Schriftkombination mitverändert. Die Installation über Google Fonts haben wir bewusst ausgelassen, ebenso Multisite und Themes anderer Anbieter. Nutzen Sie ein anderes Block-Theme, können Bezeichnungen wie Farbpalette oder Stilvarianten abweichen.

Fazit

Mit einer sauber gepflegten Palette, lokal gespeicherten Schriften und wenigen Zuordnungen unter Typografie und Farben bekommt Ihre Website ein einheitliches Erscheinungsbild, das Theme-Updates übersteht. Lesen Sie vor jedem Speichern die Änderungsliste, nutzen Sie Revisionen als Sicherheitsnetz und behalten Sie ein Datenbank-Backup für den Ernstfall. Wenn Updates und Sicherungen dauerhaft jemand anderes übernehmen soll, ist die WordPress-Wartung von Marcel Schönfelder eine Möglichkeit.

Weiterführende Anleitungen und Quellen

• Block-Theme anpassen mit theme.json
• Google Fonts lokal in WordPress einbinden
• Barrierefreiheit in WordPress nach BFSG umsetzen
• WordPress-Datenbank mit WP-CLI sichern und wiederherstellen
• WordPress Documentation: Styles Overview
• WordPress Theme Handbook: Global Settings and Styles
• W3C: WCAG 2.2, Kontrast (Minimum)