---
title: "Typografie und Farben in WordPress global im Website-Editor festlegen"
date: 2026-09-30T22:56:46+02:00
modified: 2026-10-23T22:06:41+02:00
category: wordpress
type: how_to
author: Marcel Schönfelder
canonical: https://s-edv.com/anleitungen/wordpress-typografie-farben-global-website-editor-stile
keywords:
  - WordPress
  - Website-Editor
  - Block-Theme
  - Typografie
  - Design
reading_time: 10
---

# 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.

**Kurzfassung:** Öffnen Sie **Design > Editor > Stile**. Unter **Farben > Palette bearbeiten** legen Sie Ihre Firmenfarben als individuelle Farben an, unter **Design > Schriften** laden Sie eigene Schriftdateien hoch. Danach weisen Sie unter **Typografie > Elemente** und **Farben > Elemente** Text, Links, Überschriften und Buttons ihre Werte zu. Jede gespeicherte Änderung landet als Revision in der Datenbank und lässt sich wiederherstellen. Die Anpassungen gelten für das aktive Theme und gehen bei einem Theme-Wechsel nicht automatisch mit.

## 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](https://s-edv.com/anleitungen/wordpress-block-theme-anpassen-theme-json-child-theme) beschreibt diesen Weg. Für eine einzelne Firmen-Website reicht der Website-Editor in den meisten Fällen.

> **Prüfen:** Ö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.

> **Prüfen:** 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](https://s-edv.com/anleitungen/wordpress-barrierefreiheit-bfsg-anforderungen-umsetzen).

> **Prüfen:** 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](https://s-edv.com/anleitungen/wordpress-google-fonts-lokal-einbinden-datenschutz).

> **Prüfen:** Ö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.

> **Prüfen:** 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:

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

Die Ausgabe im Test lautete:

```plaintext
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](https://s-edv.com/anleitungen/wordpress-datenbank-wp-cli-sichern-wiederherstellen) 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](https://wordpressupdate.de/?utm_source=s-edv.com&utm_medium=artikel&utm_campaign=122) 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.

> **Prüfen:** 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.

## 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](https://wordpressupdate.de/?utm_source=s-edv.com&utm_medium=fazit&utm_campaign=122) eine Möglichkeit.

## Weiterführende Anleitungen und Quellen

- [Block-Theme anpassen mit theme.json](https://s-edv.com/anleitungen/wordpress-block-theme-anpassen-theme-json-child-theme)
- [Google Fonts lokal in WordPress einbinden](https://s-edv.com/anleitungen/wordpress-google-fonts-lokal-einbinden-datenschutz)
- [Barrierefreiheit in WordPress nach BFSG umsetzen](https://s-edv.com/anleitungen/wordpress-barrierefreiheit-bfsg-anforderungen-umsetzen)
- [WordPress-Datenbank mit WP-CLI sichern und wiederherstellen](https://s-edv.com/anleitungen/wordpress-datenbank-wp-cli-sichern-wiederherstellen)
- [WordPress Documentation: Styles Overview](https://wordpress.org/documentation/article/styles-overview/)
- [WordPress Theme Handbook: Global Settings and Styles](https://developer.wordpress.org/themes/global-settings-and-styles/)
- [W3C: WCAG 2.2, Kontrast (Minimum)](https://www.w3.org/TR/WCAG22/#contrast-minimum)