Wer mit einem eigenen Child-Theme arbeitet – etwa auf Basis von GeneratePress – kennt das: Im Frontend ist alles schön formatiert, aber im Gutenberg-Editor herrscht triste Systemschrift. Die Lösung: Eine eigene editor-style.css und ein wenig Code. So bringt man seine typografischen Vorstellungen auch ins Backend!

✅ Ziel: Der Editor soll wie das Frontend aussehen

WordPress trennt bewusst zwischen Frontend und Editor-Styling. Damit der Editor nicht alles lädt, was im Frontend passiert, muss man ihm die wichtigsten Styles explizit mitgeben. Fonts gehören dazu – vor allem, wenn man Google Fonts oder lokale Schriftarten verwendet.

---

🔧 Schritt 1: Fonts im Editor verfügbar machen

In der functions.php des Child-Themes folgende Zeilen ergänzen:

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'editor-style.css' );
});

Dazu optional – aber empfehlenswert – ein weiterer Eintrag, um das CSS aus dem Customizer (sofern genutzt) auch im Editor sichtbar zu machen:

add_filter( 'block_editor_settings_all', function( $settings ) {
    $custom_css = wp_get_custom_css_post()->post_content;
    if ( ! empty( $custom_css ) ) {
        $settings['styles'][] = array( 'css' => $custom_css );
    }
    return $settings;
});

---

📦 Schritt 2: Fonts gezielt laden (z. B. Google Fonts)

Falls man im Frontend Google Fonts nutzt, müssen diese auch im Editor geladen werden:

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style(
        'editor-fonts',
        'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Antonio:wght@700&display=swap',
        false,
        null
    );
});

---

🖋 Schritt 3: Eine eigene  editor-style.css  anlegen

Im Verzeichnis des Child-Themes eine Datei editor-style.css erstellen. Beispiel:

.editor-styles-wrapper {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 22px;
    line-height: 1.55;
    color: #222;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3 {
    font-family: "Antonio", sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

Tipp: Man sollte es mit Layout-Elementen und Grid-Klassen sparsam halten – im Editor geht es primär um Typografie.

---

🎯 Ergebnis

Nach diesen drei Schritten sieht der Gutenberg-Editor aus wie dein Frontend: mit deinen Schriftarten, deinem Zeilenabstand, deinem Look. Schreiben macht dann nicht nur mehr Freude – es fühlt sich auch konsistenter und professioneller an.

---

Fazit:

Der Aufwand ist minimal, der Nutzen maximal. Wer ernsthaft mit WordPress arbeitet und Wert auf Gestaltung legt, sollte sich diese kleine Optimierung gönnen. Der Editor ist schließlich der Ort, an dem die Texte entstehen – warum sollte er nicht genauso gut aussehen wie die Seite selbst?