Wer mit einem eige­nen Child-Theme arbei­tet – etwa auf Basis von GeneratePress – kennt das: Im Frontend ist alles schön for­ma­tiert, aber im Gutenberg-Editor herrscht tris­te Systemschrift. Die Lösung: Eine eige­ne editor-style.css und ein wenig Code. So bringt man sei­ne typo­gra­fi­schen Vorstellungen auch ins Backend!

✅ Ziel: Der Editor soll wie das Frontend aussehen

WordPress trennt bewusst zwi­schen Frontend und Editor-Styling. Damit der Editor nicht alles lädt, was im Frontend pas­siert, muss man ihm die wich­tigs­ten Styles expli­zit mit­ge­ben. Fonts gehö­ren dazu – vor allem, wenn man Google Fonts oder loka­le Schriftarten verwendet.

---

🔧 Schritt 1: Fonts im Editor ver­füg­bar machen

In der functions.php des Child-Themes fol­gen­de Zeilen ergänzen:

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

Dazu optio­nal – aber emp­feh­lens­wert – ein wei­te­rer Eintrag, um das CSS aus dem Customizer (sofern genutzt) auch im Editor sicht­bar 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üs­sen die­se auch im Editor gela­den 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 eige­ne  editor-style.css  anlegen

Im Verzeichnis des Child-Themes eine Datei editor-style.css erstel­len. 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 soll­te es mit Layout-Elementen und Grid-Klassen spar­sam hal­ten – im Editor geht es pri­mär um Typografie.

---

🎯 Ergebnis

Nach die­sen drei Schritten sieht der Gutenberg-Editor aus wie dein Frontend: mit dei­nen Schriftarten, dei­nem Zeilenabstand, dei­nem Look. Schreiben macht dann nicht nur mehr Freude – es fühlt sich auch kon­sis­ten­ter und pro­fes­sio­nel­ler an.

---

Fazit:

Der Aufwand ist mini­mal, der Nutzen maxi­mal. Wer ernst­haft mit WordPress arbei­tet und Wert auf Gestaltung legt, soll­te sich die­se klei­ne Optimierung gön­nen. Der Editor ist schließ­lich der Ort, an dem die Texte ent­ste­hen – war­um soll­te er nicht genau­so gut aus­se­hen wie die Seite selbst?