Wer mit einem eige­nen Child-The­me arbei­tet – etwa auf Basis von Gene­ra­te­Press – kennt das: Im Front­end ist alles schön for­ma­tiert, aber im Guten­berg-Edi­tor herrscht tris­te Sys­tem­schrift. Die Lösung: Eine eige­ne editor-style.css und ein wenig Code. So bringt man sei­ne typo­gra­fi­schen Vor­stel­lun­gen auch ins Backend!

✅ Ziel: Der Editor soll wie das Frontend aussehen

Word­Press trennt bewusst zwi­schen Front­end und Edi­tor-Sty­ling. Damit der Edi­tor nicht alles lädt, was im Front­end pas­siert, muss man ihm die wich­tigs­ten Styl­es expli­zit mit­ge­ben. Fonts gehö­ren dazu – vor allem, wenn man Goog­le Fonts oder loka­le Schrift­ar­ten verwendet.

---

🔧 Schritt 1: Fonts im Editor verfügbar machen

In der functions.php des Child-The­mes fol­gen­de Zei­len 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 Ein­trag, um das CSS aus dem Cus­to­mi­zer (sofern genutzt) auch im Edi­tor 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 Front­end Goog­le Fonts nutzt, müs­sen die­se auch im Edi­tor 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 eigene  editor-style.css  anlegen

Im Ver­zeich­nis des Child-The­mes 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 Lay­out-Ele­men­ten und Grid-Klas­sen spar­sam hal­ten – im Edi­tor geht es pri­mär um Typografie.

---

🎯 Ergebnis

Nach die­sen drei Schrit­ten sieht der Guten­berg-Edi­tor aus wie dein Front­end: mit dei­nen Schrift­ar­ten, dei­nem Zei­len­ab­stand, dei­nem Look. Schrei­ben macht dann nicht nur mehr Freu­de – es fühlt sich auch kon­sis­ten­ter und pro­fes­sio­nel­ler an.

---

Fazit:

Der Auf­wand ist mini­mal, der Nut­zen maxi­mal. Wer ernst­haft mit Word­Press arbei­tet und Wert auf Gestal­tung legt, soll­te sich die­se klei­ne Opti­mie­rung gön­nen. Der Edi­tor ist schließ­lich der Ort, an dem die Tex­te ent­ste­hen – war­um soll­te er nicht genau­so gut aus­se­hen wie die Sei­te selbst?